javascript - 使用 owl carousel 在触摸设备上滑动时禁用垂直滚动
问题描述
我想在移动设备上水平滑动轮播时禁用网页上的垂直滚动。我正在使用猫头鹰旋转木马。
我曾尝试使用 css overflow: hidden to html, body 但不起作用。尝试了其他解决方案,但它们不起作用。我试过的代码在下面。
// Tried this but doesn't work
var owl = $j(".owl-carousel");
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
e.preventDefault()
}
});
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
return true
}
});
// Tried this but doesn't work
owl.on('drag.owl.carousel', function(event) {
$('body').css('overflow', 'hidden');
});
owl.on('dragged.owl.carousel', function(event) {
$('body').css('overflow', 'auto');
});
解决方案
您是否在初始化轮播的地方尝试过这个?
$j(".owl-carousel").owlCarousel({
onDragged: function() {
$j('body').css('overflow', 'auto');
},
onDrag: function() {
$j('body').css('overflow', 'hidden');
}
});
另外,我建议只在 body/html 标签中添加/删除一个类来添加溢出,而不是使用 JS 来操作 CSS 本身。
更新: 根据评论,似乎存在一个已知错误。其他人问了同样的问题并在这里得到了答案: 在移动设备上触发猫头鹰轮播时禁用滚动
出于数据删除的目的,我将复制某人声称适用于 IOS 的答案。请测试并告诉我们它是否适用于您的应用程序:
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
})
// disable scroll
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
e.preventDefault()
}
})
// enable scroll
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
return true
}
})
我仍然建议保留您当前的代码,包括 onDrag 和 onDragged 函数,然后更新它。将脚本标记内的代码替换为:
var $j = jQuery.noConflict();
$j( document ).ready( function() {
var owl = $j( ".owl-carousel" ).owlCarousel( {
stagePadding: 90,
loop: true,
lazyLoad: true,
dots: false,
margin: 10,
nav: false,
onDragged: function() {
$j( 'body' ).css( 'overflow', 'auto' );
},
onDrag: function() {
$j( 'body' ).css( 'overflow', 'hidden' );
},
responsive: {
0: {
items: 2
},
500: {
items: 4
},
1000: {
items: 5
}
}
} );
// disable scroll
owl.on( 'drag.owl.carousel', function( event ) {
document.ontouchmove = function( e ) {
e.preventDefault();
}
} );
// enable scroll
owl.on( 'dragged.owl.carousel', function( event ) {
document.ontouchmove = function( e ) {
return true;
}
} );
} );
推荐阅读
- html - 如何根据屏幕大小对齐项目?
- excel - 发送附件 PDF
- python - Python NameError:未定义名称'timeInMinutes'
- javascript - chrome 扩展 java 脚本中是否有与 selenium FindElements By.XPath 等价的东西?
- google-chrome - Chrome [版本 87.0.4280.88] 无法打开 - 2021 年 1 月。有谁知道解决此问题的下载?
- python - 为井字游戏创建特定的棋盘
- django - 生产问题:django 中的 sqlite3 到 postgresql 迁移问题
- python - 如何将浮点数四舍五入到小数点后三位?
- c++ - 将帕斯卡转换为 C++,我不知道帕斯卡
- javascript - 如何访问黄瓜“步骤”对象的 json 的所有“文本”属性并将它们记录到控制台?