3

これは私が何度か遭遇した厄介なものだったので、それを回避する良い方法があるかどうかを確認するのが最善だと思いました. マウス ホイールまたはトラック パッドがスクロールを制御している場合を除いて、意図したとおりにほぼ正確に機能するさまざまな場所に、「スクロール可能な」DIV 要素の多くのインスタンスがあります。

主な問題は、div がスクロール バーの下部に達すると、コマンドがメイン スクロール バーに転送され、ユーザーのページ位置が煩わしく変更されることです。このページの上部にある「既に回答がある可能性のある質問」ボックスでも同じことが起こることに気付きました。現在入力しているボックスでも同様であり、これは標準的に発生するものだと思います。しかし、メイン ページをスクロールするために要素の外にカーソルを移動する必要がある Web サイトを過去に使用したことがあります。

これを克服する方法はありますか？それが最善の解決策である場合は、Javascript を使用して喜んでいます。私の最初の考えでは、onmouseout が発生するまで何らかの onmouseover コマンドで画面をロックできると考えていましたが、私の JS は非常に制限されており、適応するようなものを見つけることができませんでした。

私が使用している DIV 要素の例は次のとおりです。

<div id='bodytext' 
style='width:300px; height:300px; z-index:4; visibility: visible; overflow: auto;'>
Data more than 300px high
</div>

事前に助けてくれてありがとう。それが不可能な場合でも、説明は非常に役立ちます!

4

3 に答える 3

2

スクロール可能なターゲット要素で wheel イベントをリッスンし、「スクロールの最後」に達した場合にのみデフォルトの動作を防ぐことができます。

var el = document.getElementById("Element");
var wrapper = document.getElementById("Wrapper");
wrapper.addEventListener("wheel", wheelEvent);

function wheelEvent(e){
  var space = (wrapper.scrollHeight - wrapper.offsetHeight) - wrapper.scrollTop;
    if(e.deltaY < 0){
    if(wrapper.scrollTop == 0){
      e.preventDefault();
      e.stopPropagation();
    }
  }else if(space <= 0){
    e.preventDefault();
    e.stopPropagation();
  }
}

これが実際の例です: https://jsfiddle.net/rivieremanuel/rcxa6csr/4/

于 2017-04-02T17:14:39.010 に答える
1

jqueryを使用している場合は、次のようなことができます

$(document).ready(function(){
  $('#bodytext').on('mouseenter', function()
  {
    $('body').css('overflow', 'hidden');
  });
  $('#bodytext').on('mouseleave', function()
  {
    $('body').css('overflow', 'visible');
  });
});

これにより、ボックスに入るときに本体のスクロールバーが自動的に非表示になり、ボックスから出るときに追加されます。

于 2012-08-06T13:05:46.337 に答える
1

DOM スクロール イベントを調べて、現在スクロールされている要素を特定する必要があります。基本的に、イベントが親要素で発生していると判断できたら、イベントを停止します。

于 2012-08-06T13:05:20.820 に答える