如何在 window 调整大小时移除/重新加载机车卷轴？

Question

我有一个正在构建的网站，该网站在桌面上使用水平布局，并在较小的屏幕上切换回本机垂直布局。我正在使用机车卷轴，效果很好，但我似乎无法缩小 window 大小。

这里是针对大屏的功能

 const lscroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true,
    direction: 'horizontal'
});

在 window.resize 事件中，如果宽度低于移动阈值，我会尝试销毁它并再次调用它，但方向是“垂直”而不是“水平”。

 const lscroll = new LocomotiveScroll({
   el: document.querySelector('[data-scroll-container]'),
   smooth: true,
   direction: 'vertical'
 });
 lscroll.destroy();
 lscroll.init();

有什么想法吗？

Answer 1

我从未使用过 LocomotiveScroll，但您提供的示例代码很奇怪。

你将垂直LS分配给lscroll，然后你销毁它（垂直LS）然后再次初始化。

你可能想使用类似的东西：

let lscroll = new LocomotiveScroll(...);

const handleResize = () => {
  const desiredType = ... // 'horizontal' or 'vertical'
  if (lscroll.direction !=== desiredType) {
    lscroll.destroy()
    lscroll = new LocomotiveScroll(...);
  }
}

如何在 window 调整大小时移除/重新加载机车卷轴？

How to remove / reload locomotive scroll on window resize?

javascript

html

jquery

css

locomotive-scroll