JavaScript scrollTop在移动设备上不工作

基础概念

scrollTop 是 JavaScript 中的一个属性，用于获取或设置一个元素的滚动条垂直位置。它通常用于控制页面或某个容器元素的滚动位置。

问题原因

在移动设备上，scrollTop 可能不工作的原因主要有以下几点：

触摸事件：移动设备主要通过触摸事件进行交互，而不是鼠标滚轮或键盘方向键。
滚动容器：如果页面内容在一个具有 overflow: auto 或 overflow: scroll 的容器内，scrollTop 需要针对该容器元素进行操作。
浏览器兼容性：不同浏览器对 scrollTop 的实现可能存在差异。

解决方法

以下是一些解决方法：

1. 使用触摸事件

在移动设备上，可以使用触摸事件来控制滚动位置。以下是一个示例代码：

let startY = 0;
let currentY = 0;

document.addEventListener('touchstart', (event) => {
    startY = event.touches[0].pageY;
});

document.addEventListener('touchmove', (event) => {
    event.preventDefault(); // 阻止默认滚动行为
    currentY = event.touches[0].pageY;
    let deltaY = startY - currentY;
    document.documentElement.scrollTop -= deltaY; // 或者针对特定容器元素
});

2. 针对滚动容器操作

如果滚动发生在某个容器内，需要针对该容器元素操作 scrollTop。以下是一个示例：

let container = document.getElementById('scrollContainer');

container.addEventListener('touchstart', (event) => {
    startY = event.touches[0].pageY;
});

container.addEventListener('touchmove', (event) => {
    event.preventDefault();
    currentY = event.touches[0].pageY;
    let deltaY = startY - currentY;
    container.scrollTop -= deltaY;
});

3. 处理浏览器兼容性

不同浏览器对 scrollTop 的实现可能存在差异，可以使用以下方法来处理兼容性问题：

function getScrollTop(element) {
    return element.scrollTop || element.pageYOffset || document.documentElement.scrollTop;
}

function setScrollTop(element, value) {
    element.scrollTop = value;
    element.pageYOffset = value;
    document.documentElement.scrollTop = value;
}