适用于平板电脑的 Scrollmagic + GSAP 水平滚动

编程问答 2022-05-15

问题描述

我目前正在使用 ScrollMagic 和 GSAP 开发一个水平滚动网站。它在具有鼠标滚轮功能的桌面上运行良好。但是，当涉及鼠标滚轮不适用的平板电脑时，锚导航不起作用并且使用 Chrome 和 ipad 时的结果各不相同（锚链接在 ipad chrome 上不起作用，但在 ipad safari 上运行良好）。我给平板添加了拖拽功能，但是它交错，动画也不是很流畅。

鼠标滚轮

document.addEventListener('wheel',function(e){
    if(e.type != 'wheel'){
        return;
    }
    let delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 1) || 1;
    document.documentElement.scrollLeft += delta;
    document.body.scrollLeft += delta;
});

拖拽

const slider = document.querySelector('html');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown',(e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave',() => {
    isDown = false;
    slider.classList.remove('active');
});
slider.addEventListener('mouseup',() => {
    isDown = false;
    slider.classList.remove('active');
});
slider.addEventListener('mousemove',(e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 3;
    slider.scrollLeft = scrollLeft - walk;
    //console.log(walk);
});

代码笔示例：https://codepen.io/shirasaki/pen/JjEyjgb

不幸的是，随着最近的 ipad 更新，似乎无法检测到用户使用的是 ipad 还是 ipad pro。

代码或css有什么问题可以解决这个问题吗？感谢您的帮助！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

gsapipadjavascriptscrollmagictablet