1

该网站在普通浏览器上运行良好，例如 Opera、Firefox、Chrome 等。通过拖动鼠标或使用标准水平滚动条在 PC 上滚动。

问题始于移动设备： 我试图让它工作很长一段时间。第一个想法是使用touch-action: pan-x;有效的默认值，除了包含position: fixed;在其样式中的元素。他们的行为很奇怪（向右拖动时 - 他们表现良好，但向左拖动时 - 他们躲起来了）。我尝试将position属性更改为absolute，然后将其设置为window.scrollLeftor$(window).scrollLeft()两者都返回错误值（似乎平移没有scrollLeft正确更改值，为什么？）所以我认为使用 JQueryscrollLeft()会更容易使用。

接下来我尝试使用与桌面浏览器相同的代码。我使用($(window).scrollLeft(xPosition)并且在 PC 上它正在工作，在移动设备上它1385 pixels在 Opera 的模拟器上停止，在 Firefox 的模拟器上停止在 1826（body宽度设置为2824.81px）

我用来滚动的功能：

var updateScrollPos = function (x) { // scroll by x
    if (($(window).scrollLeft() + (x + $(window).width()) > maxScroll)) {
        $(window).scrollLeft(maxScroll - $(window).width());
    }
    else {
        $(window).scrollLeft($(window).scrollLeft() + x);
    }
    console.log(x);
    console.log($(window).scrollLeft());
}

并且 maxScroll 基于图像宽度： maxScroll = $('.scrollview img').width();

Opera 调试屏幕中的 maxScroll 和 scrollLeft 值

我只需要知道是否有一个函数可以返回pan-x position或者为什么我的 updateScrollPos 在移动设备上不能正常工作。

这是我的第一篇文章，如果我错过了任何重要信息，我深表歉意，并提前感谢您！

4

0 回答 0