jqueryを使用して外側のスクロールバーのスクロールを無効にする-jsチュートリアル-php.cn

jqueryを使用して外側のスクロールバーのスクロールを無効にする

高洛峰

リリース： 2017-01-11 10:05:13

オリジナル

1704 人が閲覧しました

前書き

通常、内側のスクロールバーが両端までスクロールすると、外側のスクロールバーも一緒にスクロールしますが、場合によっては、ユーザーが外側 (ウィンドウ) のスクロールバーをトリガーせずに現在の領域のみをスクロールできるようにしたいと考えています。の場合、外側のスクロールバーは、現在の領域を離れた後にのみスクロールできます。ユーザーが誤ってスクロールしすぎて、現在の領域が表示領域から外れてしまう可能性があるためです。

jqueryではスクロールイベントはscrollであり、このイベントはバブリングやデフォルトイベントを防ぐことはできません。ウィンドウのスクロールバーを無効にするように設定した場合、私が採用する戦略は次のとおりです。マウスが現在の領域に入ると、ウィンドウのスクロールバーの高さは常にマウスが入る前の高さになります

次のコード:

<style type="text/css">
 .main{
 overflow: auto;
 width: 400px;
 height: 400px;
 border: 1px solid #aaa;
 }
 .main p{
 height: 800px;
 }
</style>
 
<body>
 <div id="main" class="main">
 <p></p>
 </div>
 <p style="height:1000px;"></p>
</body>
 
$(function () {
 var scrollTop = -1; // 鼠标进入到区域后，则存储当前window滚动条的高度
 $(&#39;#main&#39;).hover(function(){
 scrollTop = $(window).scrollTop();
 }, function(){
 scrollTop = -1;
 });
 
 // 鼠标进入到区域后，则强制window滚动条的高度
 $(window).scroll(function(){
 scrollTop!==-1 && $(this).scrollTop(scrollTop);
 })
})

ログイン後にコピー

上からコードからわかるように、ウィンドウのスクロールバーイベントを妨げず、ユーザーがスクロールするたびに値を再割り当てしました。

まとめ

以上がこの記事の内容です。この記事の内容が皆さんの勉強や仕事に少しでも役立つことを願っています。もちろん、もっと良い方法があるかもしれませんので、皆さんもぜひ提供してください。あなた！

jquery を使用して外側のスクロールバーのスクロールを無効にすることに関するその他の記事については、PHP 中国語 Web サイトに注目してください。