my code dosen't work on IE and Firefox but works in Chrome: the scroll left value on IE and Firefox = 0, why?
<body style="direction:rtl">
<div style="width:520px; margin:0 auto; background:#eee; height:120px;overflow:scroll " id="BookSliderContent">
<div style="white-space:nowrap;">
<div style="width:100px;height:100px; background-color:lightblue;margin:20px;display:inline-block">1</div>
<div style="width:100px;height:100px; background-color:lightblue;margin:20px;display:inline-block">2</div>
<div style="width:100px;height:100px; background-color:lightblue;margin:20px;display:inline-block">3</div>
<div style="width:100px; height:100px; background-color:lightblue; margin:20px; display:inline-block">4</div>
<div style="width:100px;height:100px; background-color:lightblue; margin:20px; display:inline-block;">5</div>
</div>
</div>
<script type="text/javascript">
var ScrollLeft = 0;
ScrollLeft = document.getElementById("BookSliderContent").scrollLeft;
alert(ScrollLeft);
</script>