如何禁用無效的滾動條，但不能永久禁用？

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")刪除該處理程序。