17

質問は非常に長いので、それを要約したタイトルを思い付くのは難しいことがわかりました。

そう、とにかく。スクロールバーが表示されるように、頻繁にオーバーフローするものがありますdiv。overflow: auto次に、コンテンツの上に配置されdivているがあります。position: fixeddiv

これで、html本体自体の上に固定位置divを設定すると、マウスを上に置いたときにホイールでドキュメントをスクロールできますdiv。前述のように幸運ではありませんdiv。

div固定位置のものを「スルー」する方法はありますか？

固定divを超えたときにスクロールイベントをキャッチすることさえ簡単ではないことに気づきました。固定div自体がスクロール可能でない限り、イベントは発生しません。

ここで簡単なjsFiddleを作成しましたが、便宜上、試したすべてのJavaScriptを削除しました。

編集：私は固定divで他のマウス機能を保持する必要があるので、ポインターイベントをオフにすることは私の場合の解決策ではありません。

4

4 に答える 4

29

あなたが探しているのはpointer-events: none;

これにより、ポインタは本質的にそのdivと相互作用しないので、

#fixed {
  pointer-events: none;
}

デモ

そして、JSを必要とせずに希望の結果を得ることができます。これにより、divとの他のすべての対話が停止しますが、何らかの理由でdivと対話する必要がある場合は、JSソリューションを調べる必要があります。

于 2012-11-21T14:02:49.270 に答える
18 
var fixedElement = document.getElementById("fixed");

function fixedScrolled(e) {
    var evt = window.event || e;
    var delta = evt.detail ? evt.detail * (-120) : evt.wheelDelta; //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    $("#content").scrollTop($("#content").scrollTop() - delta);
}

var mousewheelevt = (/Gecko\//i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
if (fixedElement.attachEvent)
    fixedElement.attachEvent("on" + mousewheelevt, fixedScrolled);
else if (fixedElement.addEventListener)
    fixedElement.addEventListener(mousewheelevt, fixedScrolled, false);

jsFiddleデモ-スクロール！

于 2012-11-21T14:40:53.627 に答える
12

私はもっ​​とエレガントな解決策を思いつきました、しかしそれが私を正しい軌道に導いたのはRuirizeの答えだったので、私は彼にacceptタグを与えました。

$('#fixed').on('mousewheel DOMMouseScroll', function(event) {
    $('#content').scrollTop($('#content').scrollTop() - (event.originalEvent.wheelDelta || -event.originalEvent.detail*30));
});

jsFiddleにも表示されます。

于 2012-11-22T12:59:02.480 に答える
2

受け入れられた答えは間違いなく必要な結果をもたらしますが、自然にスクロールする滑らかさと、scrollTopを設定することによってトリガーされるスクロールには顕著な違いがあります。pointer-events: none;これは、固定要素と対話する機能を実際に削除することなく、の最良の部分を利用します。

function enableScroll(e) {
  var self = $(this);
  self.css('pointer-events', 'none');
  clearTimeout(this.timer);
  this.timer = setTimeout(function () {
      self.css('pointer-events', 'all');
  }, 100);
}
$('#fixed').on('mousewheel DOMMouseScroll', enableScroll);
于 2019-12-20T20:59:04.040 に答える