小编Axi*_*ion的帖子

防止窗口垂直滚动,直到div的水平滚动到达其末端

我有一个可以正常(垂直)滚动的页面,并且我希望有一个div可以通过鼠标滚轮向下滚动,然后在完成水平滚动后恢复垂直滚动。这就是我要完成的工作。

  • 页面正常滚动(垂直)
  • 到达div #scroll后,我希望页面滚动停止,并且希望#scroll中的内容垂直滚动
  • 滚动到#scroll的末尾后,我想恢复正常的页面滚动(垂直)。

我尝试了一些解决方案,但遇到以下问题

  • 当我水平#scroll内容时,垂直页面滚动不会停止
  • 当我停止垂直滚动并到达水平滚动的末尾时,我必须滚动50次才能离开该div。

到目前为止,这就是我所拥有的...

var scroller = {};
scroller.e = document.getElementById("scroll");

if (scroller.e.addEventListener) {
    scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
    scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {

    // cross-browser wheel delta
    var e = window.event || e;
    var delta = - 30 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));

    var pst = $('#scroll').scrollLeft() + delta;

    if (pst < 0) {
        pst = 0;
    } else if (pst > $('.box-wrap').width()) {
        pst = $('.box-wrap').width();
    }

    $('#scroll').scrollLeft(pst);

    return …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

11
推荐指数
4
解决办法
1314
查看次数

标签 统计

css ×1

html ×1

javascript ×1

jquery ×1