javascript - 更新购物车和结帐中的滚动(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();
});
});
});
解决方案
推荐阅读
- docker - KEYSTORE.JKS 存在失败 - 以代码 1 #662 退出 - Confluent kafka
- java - 在 ELKI 中将 DBSCAN 与 RStarTree 一起使用时出现 UnsupportedOperationException
- c - 为什么 char [] 作为静态
- angular - Angular - 如何在任何时候触发列表的每个元素上的事件时不重建使用 *ngFor 创建的列表
- c# - 如何从 Assets 文件夹中获取所有预制件?在编辑器中获取无效的强制转换异常
- python - 是否可以定义 java 风格(非静态)内部类(在类范围内)
- flutter - Flutter中如何知道文章点击了哪个词
- node.js - 传递数据视图查询节点快递 - ejs
- go - 如何在编译时使用 golang 在不知道其类型的情况下解析 protobuf3 消息?
- java - SOAP Web 服务解析器中的异常已被使用