ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryを使用して外側のスクロールバーのスクロールを無効にする
jqueryを使用して外側のスクロールバーのスクロールを無効にする
- 高洛峰オリジナル
- 2017-01-11 10:05:131767ブラウズ
前書き
通常、内側のスクロール バーが両端までスクロールすると、外側のスクロール バーも一緒にスクロールしますが、場合によっては、ユーザーが外側 (ウィンドウ) のスクロール バーをトリガーせずに現在の領域のみをスクロールできるようにしたいと考えています。の場合、外側のスクロール バーは、現在の領域を離れた後にのみスクロールできます。ユーザーが誤ってスクロールしすぎて、現在の領域が表示領域から外れてしまう可能性があるためです。
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滚动条的高度
$('#main').hover(function(){
scrollTop = $(window).scrollTop();
}, function(){
scrollTop = -1;
});
// 鼠标进入到区域后，则强制window滚动条的高度
$(window).scroll(function(){
scrollTop!==-1 && $(this).scrollTop(scrollTop);
})
})上から コードからわかるように、ウィンドウのスクロールバーイベントを妨げず、ユーザーがスクロールするたびに値を再割り当てしました。
まとめ
以上がこの記事の内容です。この記事の内容が皆さんの勉強や仕事に少しでも役立つことを願っています。もちろん、もっと良い方法があるかもしれませんので、皆さんもぜひ提供してください。あなた！
jquery を使用して外側のスクロール バーのスクロールを無効にすることに関するその他の記事については、PHP 中国語 Web サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。