javascript - 如何在窗口调整大小时删除/重新加载机车滚动？

Question

我有一个正在构建的网站，它在桌面上使用水平布局，并在较小的屏幕上切换回原生垂直布局。我正在使用机车滚动，效果很好，但我似乎无法缩小窗口大小。

这是大屏幕的功能

 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(...);
  }
}