我如何禁用不活動的滾動條，但不是永久性的？

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")的處理程序。