更新购物车和结帐中的滚动Woocommerce + Locomotive Scroll

问题描述

现在我正在开发的自定义 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();
      });
    });
  });

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）