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

问题描述

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

这里是大屏幕的功能

 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]'),direction: 'vertical'
 });
 lscroll.destroy();
 lscroll.init();

有什么想法吗？

解决方法

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

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

您可能想要使用以下内容：

let lscroll = new LocomotiveScroll(...);

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