脚本可在Chrome上运行，但不能在Firefox上运行

Question

我在页面右边有这个固定的元素。 这是它的CSS代码：

#rightSide {
  height: 100%;
  min-height: 613px;
  width: 450px;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
  background-color: #fafafa;
  position: fixed;
  right: 0px;
  display: block;
  float: right;
  padding: 0;
  z-index: 200;
}

HTML：

<body>
  <div id="rightSide"></div>
</body>

我要对此页面执行的操作是：当调整窗口大小时，该元素仅在垂直方向固定，并且它将与页面一起水平滚动。 这是我使用的Javascript（调整大小和滚动是jQuery事件）：

$(window).resize(function() {
  var bod = $('body').innerWidth();
  var wid = $(this).innerWidth();
  var wind = bod - wid;
  $('#rightSide').css("right", '-'+ wind +'px');
  $(this).scroll(function () {
    var scrleft = $('body').scrollLeft();
    var scrl = scrleft - wind;
    $('#rightSide').css("right", scrl +'px');
  });
});

奇怪的是，这段代码只能在Chrome上正常运行，而不能在Firefox上正常运行。 您知道为什么会这样吗？

谢谢！

编辑这是正文CSS（如果有帮助的话）。

body {
  width : 100%;
  min-width: 1070px;
  height : 100%;
  margin : 0px auto 0px auto;
  padding : 0px 0px 0px 0px;
  display: block;
  overflow-y: auto;
  overflow-x: auto;
  min-height: 613px;
}

Answer 1

您不需要像这样的脚本。 position: fixed; right:0; position: fixed; right:0; CSS应该足够了。 另外，取出float: right; 样式; 这是不必要的，并且绝对/固定定位没有意义。 您也不需要display:block block-默认情况下div是block。

Answer 2

好吧，我找到了问题的根源，看来在Firefox和IE下，要正确使用scrollLeft，必须使用document而不是body来完成，例如：

var scrleft = $(document).scrollLeft();

希望这可以帮助。