You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Splide.js滑块在macOS触摸板无法横向滑动的问题求助

Splide.js滑块在macOS触摸板无法横向滑动的问题求助

我用Splide.js做了一个滑块,但遇到个头疼的问题:在macOS系统上,用触摸板横向滑动的时候滑块完全没反应,但是在Windows上所有功能都正常工作。可惜我自己没有macOS设备没法调试,有没有大佬能帮忙分析下问题出在哪呀?

以下是我的实现代码:

const splide = document.querySelector('.slider');

const interval = 5000; // The autoplay interval duration in milliseconds 
const speed = 1000; // Slider transition speed in ms
const dragMinThreshold = { // Minimum distance in pixels to start dragging
  mouse: 0,
  touch: 10,
};
const flickPower = 500; // Determine the power of "flick". The larger number this is, the farther the carousel runs.
const wheelMinThreshold = 20; // The threshold to cut off the small delta produced by inertia scroll.
const wheelSleep = 500; // The sleep duration in milliseconds until accepting next wheel.

const splideInstance = new Splide(splide, {
  autoWidth: true,
  arrows: false,
  pagination: false,
  updateOnMove: true,
  autoplay: false,
  interval,
  perPage: 1,
  type: 'loop',
  gap: '1rem',
  drag: true,
  dragMinThreshold,
  flickMaxPages: 1,
  flickPower,
  speed,
  snap: false,
  wheelMinThreshold,
  wheelSleep,
});

let lastTime = 0
function onWheel(e) {
  if (e.cancelable) {
    const { deltaX } = e;
    const backwards = deltaX < 0;
    const timeStamp = e.timeStamp;
    const min = splideInstance.options.wheelMinThreshold || 20;
    const sleep = splideInstance.options.wheelSleep || 300;

    if (Math.abs(deltaX) > min && timeStamp - lastTime > sleep) {
      splideInstance.go(backwards ? '<' : '>');
      lastTime = timeStamp;
    }
  }
}

splide.addEventListener('wheel', onWheel);

splideInstance.mount();

备注:内容来源于stack exchange,提问作者konfuzz

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.13 19:58:07