Question

我在页面上有两个滚动条，一个是活动的，另一个是在后台工作。

我想禁用该滚动条直到我的第一个滚动条工作。

Answer 1

实际上这非常简单，请看下面的代码片段：

$(window).on("load",function(){
  $("#left").on("scroll",function() {
    $("#right").css("overflow","scroll"); //enable scrollbar
    $("#right").css("overflow-x","hidden"); //disable horizontal scrollbar
    $("#left").off("scroll"); //remove the scroll-handler
  });
});

html, body {width:95%; height:95%;}

#left,#right {
  width: 45%;
  height: 100%;
  border: 2px solid grey;
}
#left {
  float: left;
  overflow: scroll;
  overflow-x: hidden;
}
#right {
  float: right;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="left">
  This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />
</div>

<div id="right">
  This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />This<br />is<br />a<br />line<br />
</div>

（小提琴：http://jsfiddle.net/dyedkj56/2/ ）

要禁用滚动条，请将overflow:hidden;放入第二个滚动条的CSS中。
然后在滚动第一个滚动条时启用它，使用jQuery处理程序.on("scroll",function(){。
最后，为了确保每次在第一次滚动之后不会不必要地调用和执行此处理程序，请使用.off("scroll")删除处理程序。

如何禁用非活动滚动条，但不能永久禁用？

1 个答案: