图像转盘中的水平滚动问题
Issue with horizontal scroll in image carousel
我尝试了不同的方法来设置图像滚动的水平滚动,并最终做到了这一点,但不幸的是,我不知道如何使用Flickity图像滑块来解决以下问题。浏览器控制台显示以下错误:
无法设置未定义的属性"x"
无法读取未定义的属性"x"
正如您在codepen.io的示例中看到的那样,这些行为非常糟糕
$('.gallery').mousewheel(function(e) {
e.preventDefault();
var flkty = Flickity.data(this);
if (!window.wheeling) {
// console.log('start wheeling!');
if(e.deltaX > 0 || e.deltaY < 0){
flkty.next();
} else if(e.deltaX < 0 || e.deltaY > 0){
flkty.previous();
}
}
clearTimeout(window.wheeling);
window.wheeling = setTimeout(function() {
// console.log('stop wheeling!');
delete window.wheeling;
// reset wheeldelta
window.wheeldelta.x = 0;
window.wheeldelta.y = 0;
}, 50);
window.wheeldelta.x += e.deltaFactor * e.deltaX;
window.wheeldelta.y += e.deltaFactor * e.deltaY;
if(window.wheeldelta.x > 500 || window.wheeldelta.y > 500 || window.wheeldelta.x < -500 || window.wheeldelta.y < -500){
window.wheeldelta.x = 0;
window.wheeldelta.y = 0;
if(e.deltaX > 0 || e.deltaY < 0){
flkty.next();
} else if(e.deltaX < 0 || e.deltaY > 0){
flkty.previous();
}
}
// console.log(window.wheeldelta);
});
p.S:该代码在这个JQuery插件之上运行。
当我用普通鼠标滚轮测试它时,我看到的问题是这样的,事实上,当你的手指停止时,滚轮也会同时停止,所以尽管控制台日志中有错误,你仍然可以轻松地继续导航,一个月前,我把我的嘴改成了苹果魔术鼠标,如果我用力翻转,我会注意到错误日志仍在统计错误,我无法继续,直到它结束,我还没有在笔记本触摸板上测试它,但我觉得同样的问题仍然存在,我正在寻找他们的方法来解决它。
您没有在任何位置设置window.wheeldelta
变量,因此无法将x
或y
分配给它。在代码开头添加一个位置:
window.wheeldelta = {x: 0, y: 0};
相关文章:
- 如何创建一个具有固定左右列和水平滚动的表
- 通过水平滚动将页眉固定到页面顶部
- 具有Twitter引导程序的水平滚动表
- 如何避免鼠标水平滚动选项卡面板溢出
- 使用鼠标滚轮水平滚动页面
- 水平滚动不适用于jquery单击
- 每次单击按钮时水平滚动元素
- 简单的一页水平滚动
- 移动浏览器-如何删除拖动到水平滚动
- 如何避免在自由jqgrid中单击单元格进行水平滚动编辑
- 网站水平滚动,但单独的页面
- html表格的浮动水平滚动条
- 单击水平滚动库中的图像以居中显示无法工作的功能
- 移动/触摸屏幕 - 滑动时水平滚动
- 如何在水平滚动 Jquery 上实现延迟加载
- 具有无限水平滚动的流体可调整大小图像(修订版 2)
- visjs时间线的水平滚动条
- Chrome中无法进行水平滚动
- 水平滚动Marquee,当函数被调用时,我的文本坚持聚集在一起
- 在安卓系统中使用jquery Mobile中的水平滚动