1

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

这是大屏幕的功能

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

有任何想法吗?

4

1 回答 1

0

我从未使用过 LocomotiveScroll,但这是您提供的一个奇怪的示例代码。

您将垂直 LS 分配给lscroll,然后将其销毁(垂直 LS),然后再次初始化。

您可能想使用类似的东西:

let lscroll = new LocomotiveScroll(...);

const handleResize = () => {
  const desiredType = ... // 'horizontal' or 'vertical'
  if (lscroll.direction !=== desiredType) {
    lscroll.destroy()
    lscroll = new LocomotiveScroll(...);
  }
}
于 2021-01-21T21:45:07.983 回答