如何解决更新购物车和结帐中的滚动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 举报,一经查实,本站将立刻删除。