仅在具有触摸功能的Windows机器上滚动内部溢出DIV

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了仅在具有触摸功能的Windows机器上滚动内部溢出DIV相关的知识,希望对你有一定的参考价值。

我有一个问题,在Windows机器上div内的滚动有点跳跃。

有一些脚本涉及相邻的div向相反方向滚动。有人可以看看是什么导致跳跃?

http://dev-pavlov-agency.pantheonsite.io/portfolio/

这是附加的脚本,在其他地方很有用:

function rightscroll(){

  var scrolltopper = $("#work-archive .box-1-2.right .scroll-inner").height();
  $("#work-archive .box-1-2.right").scrollTop(scrolltopper );

  var scrolledright = parseInt($("#work-archive .box-1-2.right").scrollTop());

    $("#work-archive .box-1-2.left").on("scroll", function () {
        var scrolledleft = parseInt($("#work-archive .box-1-2.left").scrollTop()) * -1;
        $("#work-archive .box-1-2.right").scrollTop(scrolledleft + scrolledright)
        console.log(scrolledleft + scrolledright);
    });

    $("#work-archive .box-1-2.right").on("scroll", function () {
        var scrolledleft = parseInt($("#work-archive .box-1-2.right").scrollTop()) * -1;
        $("#work-archive .box-1-2.left").scrollTop(scrolledleft + scrolledright)
        console.log(scrolledleft + scrolledright);
    });      


};

setTimeout(rightscroll, 1000);
答案

找到了一个解决方案:添加了两个限制函数的变量,这些变量取决于滚动的div,现在效果很好。

以上是关于仅在具有触摸功能的Windows机器上滚动内部溢出DIV的主要内容,如果未能解决你的问题,请参考以下文章

iPad上的Webkit溢出滚动触摸CSS错误

移动 Safari - 输入插入符号不会随着溢出滚动一起滚动:触摸

Flexbox 溢出滚动条显示在正文而不是内部元素上

仅在从 Windows 运行时出现 500 内部错误 (7)

css iOS溢出隐藏滚动触摸

触摸事件仅在iPad iOS 11.4上的Mobile Safari中滚动时触发“一次”