我使用了两个 jQuery 插件:sidr(用于左侧菜单)和 fancybox(用于显示一些文章内容)。
这两个插件在桌面版本中运行良好，但我的网站有一个移动版本，在某些浏览器中的这个移动版本中我遇到了问题。
我无法在 fancybox 中向下滚动我的内容，我也无法在我的 sidr 侧左侧菜单中向下滚动我的菜单项。
你知道为什么会这样吗？
我已经尝试使用 -webkit-overflow-scrolling: touch; 但我从来没有成功过。
这里有我的 fancybox 演示:
http://jsfiddle.net/qVrLr/112/
在桌面版本中，当我单击“阅读更多”打开 fancybox 时，我的网站内容保持被阻止状态，并且我可以毫无问题地滚动我的 fancybox。
在移动设备上，当我点击“阅读更多”打开 fancybox 时，我的网站内容没有被阻止，当我滚动 fancybox 我的网站内容时。
在某些浏览器中，当我尝试滚动 fancybox 时，我只是将我的网站页面滚动到 fancybox 后面，但我的 fancybox 不滚动...
最佳答案
我在我正在处理的网站响应式前端之一中遇到了类似的问题，虽然我有自己的对话框实现，但你的问题感觉很相似。网络上的大多数答案都指出让 body 的溢出属性对触摸设备隐藏，但效果不佳(我忘记了哪里出了问题，但我可以向你保证它不起作用)。下一个解决方案是在打开对话框并在关闭时重置为相对/静态后为 body 设置固定位置。
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();
}
类似地在关闭时调用 unblock()。 (Fancybox 必须有打开和关闭的事件)
ScrollBlocker 对我来说效果很好!
Source - I faced this problem earlier and it took a lot of time to come to an exact solution. The ScrollBlocker class was implemented using an answer at stackoverflow but this was months ago so I am unable to find the question that helped.
关于css - 无法在我的 "fancybox"和移动设备上的 "sidr side left menu"中向下滚动(在某些浏览器中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25124300/