0

现在，我正在开发的自定义 Understrap 主题中使用 Locomotive Scroll。它在每个页面上都运行良好，但我的购物车和结帐页面有一些问题。

我正在使用 Woocommerce Blocks 扩展来拥有更好的购物车和结帐页面。我的问题如下：

  • 当我从购物车中删除产品时，它会在页面下方创建一个空白区域。单击删除按钮时，我尝试添加一些代码来更新滚动条，但它不起作用（见下文）
  • 在我的结帐页面中，如果有错误，则会出现通知。如果我不关闭通知，我将无法在页面底部滚动。同样，滚动需要更新。
  • 我的最后一个问题是window.addEventListener('load', function (event) {})我在下面使用的功能。我怎样才能防止用户滚动，直到它被加载？因为现在他可以在页面完全加载之前滚动，这会弄乱 locomotive-scroll

目前，我没有找到任何解决方案..

这是我现在正在使用的javascript：

window.addEventListener('load', function (event) {
    // Initialize the Locomotive scroll
    const scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true,
      smartphone: {
        smooth: true,
      },
      tablet: {
        smooth: true,
      },
      getDirection: true,
    });

    window.addEventListener('resize', function () {
      scroll.update();
    });

    scroll.on('scroll', (instance) => {
      document.documentElement.setAttribute('data-direction', instance.direction);
    });

    scroll.update();

    let deleteItemButtons = document.querySelectorAll('.wc-block-cart-item__remove-link');
    console.log(deleteItemButtons);

    deleteItemButtons.forEach((deleteItemButton) => {
      deleteItemButton.addEventListener('click', (e) => {
        // scroll.setScroll(0, 0);
        scroll.update();
      });
    });
  });
4

0 回答 0