96

スクロールバー付きのdivがあり、最後に到達するとページがスクロールを開始します。とにかくこの動作を止めることができますか?

4

14 に答える 14

68

次のようにすると、ページ全体のスクロールを無効にできます。

<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>
于 2012-04-18T14:21:18.207 に答える
43

解決策を見つけました。

http://jsbin.com/itajok

これが私が必要としていたものです。

そしてこれがコードです。

http://jsbin.com/itajok/edit#javascript,html

jQuery プラグインを使用します。

非推奨のお知らせによる更新

jquery-mousewheelから:

deltaイベント ハンドラーに 3 つの引数 ( 、deltaX、および) を追加するという古い動作はdeltaY廃止され、今後のリリースでは削除される予定です。

次に、event.deltaY使用する必要があります。

var toolbox = $('#toolbox'),
    height = toolbox.height(),
    scrollHeight = toolbox.get(0).scrollHeight;

toolbox.off("mousewheel").on("mousewheel", function (event) {
  var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
  return !blockScrolling;
});

デモ

于 2012-05-09T10:57:06.470 に答える
8

divでmouseoverイベントを使用して本文のスクロールバーを無効にし、次にmouseoutイベントを使用して再度アクティブにすることができますか？

例：HTML

<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
    content
</div>

そして、JavaScriptは次のようになります。

var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
    body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
    body.style.overflowY = 'auto';
}
于 2012-04-18T14:22:01.383 に答える
8

これは、Y 軸でこれを行うクロスブラウザーの方法です。デスクトップとモバイルで動作します。OSX および iOS でテスト済み。

var scrollArea = this.querySelector(".scroll-area");
scrollArea.addEventListener("wheel", function() {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var deltaY = event.deltaY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
}, {passive:false});

scrollArea.addEventListener("touchstart", function(event) {
    this.previousClientY = event.touches[0].clientY;
}, {passive:false});

scrollArea.addEventListener("touchmove", function(event) {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var currentClientY = event.touches[0].clientY;
    var deltaY = this.previousClientY - currentClientY;
    if ( (scrollTop >= maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
    this.previousClientY = currentClientY;
}, {passive:false});
于 2017-07-02T22:23:24.000 に答える
6

私があなたの質問を正しく理解していれば、マウスが div (サイドバーとしましょう) の上にあるときにメイン コンテンツがスクロールしないようにする必要があります。そのため、スクロール イベントが親にバブリングしないように、サイドバーはメイン コンテンツ (ブラウザー ウィンドウ) のスクロール コンテナーの子ではない場合があります。

これには、次の方法でマークアップの変更が必要になる可能性があります。

<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div> 
<div id="sidebar"> 
</div>

このサンプル フィドルで動作していることを確認し、サイドバーのマウスを離す動作がわずかに異なるこのサンプル フィドルと比較してください。

ブラウザのメイン スクロールバーで特定の div を 1 つだけスクロールするも参照してください。

于 2012-04-18T14:52:25.533 に答える
3

これにより、セレクター要素を入力すると、ウィンドウのスクロールが無効になります。魅力のように機能します。 

elements = $(".selector");

elements.on('mouseenter', function() {
    window.currentScrollTop = $(window).scrollTop();
    window.currentScrollLeft = $(window).scrollTop();
    $(window).on("scroll.prevent", function() {
        $(window).scrollTop(window.currentScrollTop);
        $(window).scrollLeft(window.currentScrollLeft);
    });
});

elements.on('mouseleave', function() {
    $(window).off("scroll.prevent");
});
于 2016-09-03T12:49:11.360 に答える
2 
$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) {
  var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
  var scrollTop = this.scrollTop;
  if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) {
    e.preventDefault();
  }
});
于 2015-11-02T19:43:11.517 に答える
2

このようなことを行うことで、ページ全体のスクロールを無効にできますが、スクロールバーを表示できます!

<div onmouseover="document.body.style.overflow='hidden'; document.body.style.position='fixed';" onmouseout="document.body.style.overflow='auto'; document.body.style.position='relative';"></div>
于 2015-06-17T16:27:37.223 に答える
0

overflow: hiddenスタイルを適用すると、それは消えるはずです

編集:実際、私はあなたの質問を間違って読んでいます。それはスクロールバーを非表示にするだけですが、それはあなたが探しているものではないと思います.

于 2012-04-18T14:12:59.960 に答える
0

Chrome と Firefox で機能する答えを得ることができなかったので、この融合を思いつきました。

$someElement.on('mousewheel DOMMouseScroll', scrollProtection);

function scrollProtection(event) {
    var $this = $(this);
    event = event.originalEvent;
    var direction = (event.wheelDelta * -1) || (event.detail);
    if (direction < 0) {
        if ($this.scrollTop() <= 0) {
            return false;
        }
    } else {
        if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) {
            return false;
        }
    }
}
于 2016-12-10T06:55:02.660 に答える