我使用了两个jQuery插件:sidr(用于左侧菜单)和fancybox(用于显示一些文章内容)。
这两个插件在桌面版本中运行良好,但我的网站有移动版本,在某些浏览器的移动版本中我遇到了问题。
我无法在fancybox中向下滚动我的内容,而且我也无法在我的sidr侧左侧菜单中向下滚动菜单项。
你知道为什么会这样吗?
我已经尝试使用-webkit-overflow-scrolling: touch;
,但我从未取得过成功。
我在这里有我的fancybox演示:
http://jsfiddle.net/qVrLr/112/
在桌面版本中,当我点击"阅读更多"打开fancybox我的网站内容一直被阻止,我可以毫无问题地滚动我的fancybox。
在移动设备中,当我点击"阅读更多"打开fancybox我的网站内容没有被阻止,当我滚动fancybox我的网站内容。
在某些浏览器中,当我尝试滚动fancybox时,我只是将我的网页滚动到fancybox后面,但我的fancybox不会滚动...
答案 0 :(得分:0)
我在网站的一个响应前端遇到了类似的问题,我有自己的对话框实现,但你的问题感觉很相似。网上的大多数答案都指出要将身体的溢出属性隐藏在触摸设备中,但这样做不好(我忘了它出了什么问题,但我可以向你保证它不起作用)。下一个解决方案是在打开对话框后为身体设置固定位置。在结束时重置为相对/静态。
if(Modernizr.touch){
$("body").css("position", "fixed");
}
这很好用,不会打扰对话框的滚动。但问题是如果对话框打开操作在页面底部完成,那么在打开对话框时页面会自动向上滚动(取顶部:0)。要解决此问题,您可以使用以下类来记住offsetY并在结束时再将其设置回来。
function ScrollBlocker(){
var self = this;
self.offsetY = window.pageYOffset;
self.$body = $('body'),
self.$win = $(window),
self.$close = $('.close'),
self.$open = $('.open'),
self.$holder = $('#popupholder'),
self.$stuff = $('#stuff');
}
ScrollBlocker.prototype.block = function(){
var self = this;
self.offsetY = window.pageYOffset;
// Block scrolling
self.$body.css({
'position': 'fixed',
'top': -self.offsetY + 'px'
});
}
ScrollBlocker.prototype.unblock = function(){
var self = this;
self.$body.css({
'position': 'static',
});
self.$win.scrollTop(self.offsetY);
self.$stuff.scrollTop(0);
}
var scrollBlocker = new ScrollBlocker();
分别在打开和关闭时使用阻止和取消阻止功能,您可以解决问题。例如,打开一个对话框
if(Modernizr.touch || BrowserDetect.windowsPhone)
{
scrollBlocker.block();
}
同样在close上调用unblock()。 (Fancybox必须有开场和结束的事件)
ScrollBlocker对我来说效果很好!
来源 - 我之前遇到过这个问题,花了很多时间 得出一个确切的解决方案。 ScrollBlocker类已实现 在stackoverflow上使用答案,但这是几个月前,所以我 无法找到有帮助的问题。