Css 无法在手机上的“fancybox”和“sidr侧左菜单”中向下滚动(在某些浏览器中)
我使用了两个jQuery插件:sidr用于左侧菜单,fancybox用于显示一些文章内容 这两个插件在桌面版本中运行良好,但我的网站有一个移动版本,在一些浏览器的移动版本中,我遇到了一个问题 我无法向下滚动fancybox中的内容,也无法向下滚动sidr左侧菜单中的菜单项 你知道为什么会这样吗 我已经尝试使用-webkit溢出滚动:touch;但我从未成功过 这里是我的fancybox演示: 在桌面版本中,当我单击“阅读更多”打开fancybox时,我的网站内容将被阻止,并且我可以毫无问题地滚动我的fancybox 在手机中,当我点击阅读更多以打开fancybox我的网站内容时,它不会被阻止,当我滚动fancybox我的网站内容时Css 无法在手机上的“fancybox”和“sidr侧左菜单”中向下滚动(在某些浏览器中),css,jquery-plugins,fancybox,sidr,Css,Jquery Plugins,Fancybox,Sidr,我使用了两个jQuery插件:sidr用于左侧菜单,fancybox用于显示一些文章内容 这两个插件在桌面版本中运行良好,但我的网站有一个移动版本,在一些浏览器的移动版本中,我遇到了一个问题 我无法向下滚动fancybox中的内容,也无法向下滚动sidr左侧菜单中的菜单项 你知道为什么会这样吗 我已经尝试使用-webkit溢出滚动:touch;但我从未成功过 这里是我的fancybox演示: 在桌面版本中,当我单击“阅读更多”打开fancybox时,我的网站内容将被阻止,并且我可以毫无问题地滚动
在一些浏览器中,当我尝试滚动fancybox时,我只是在fancybox后面滚动我的网站页面,但我的fancybox不会滚动…我在网站的一个响应前端中遇到了类似的问题,我有自己的对话框实现,但你的问题感觉很相似。网络上的大多数答案都指出,要将身体的溢出属性隐藏在触摸设备中,但这不起作用。我忘了是什么地方出了问题,但我可以向你保证,这不起作用。下一个解决方案是在打开对话框并在关闭时重置为相对/静态后,为阀体设置固定位置
if(Modernizr.touch){
$("body").css("position", "fixed");
}
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();
这很好,不会干扰对话框的滚动。但问题是,如果对话框打开操作是在页面底部完成的,那么在打开对话框时,页面会自动向上滚动到顶部:0。要解决这个问题,您可以使用下面的类来记住offsetY,并在关闭时将其重新设置
if(Modernizr.touch){
$("body").css("position", "fixed");
}
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();
分别在打开和关闭时使用阻止和取消阻止功能,可以解决问题。e、 打开一个对话框
if(Modernizr.touch || BrowserDetect.windowsPhone)
{
scrollBlocker.block();
}
类似地,在关闭时调用unblock。Fancybox必须有用于打开和关闭的事件
卷轴拦截器对我很有效
来源-我之前遇到过这个问题,花了很多时间来解决
得出一个精确的答案。实现了ScrollBlocker类
在stackoverflow使用答案,但这是几个月前的事了,所以我
找不到有帮助的问题
我可以在safari上用我的iPhone滚动、打开你的小提琴。我只有一个索尼爱立信live随身听。在我的手机中,它不工作,只在mozilla中工作,但在我的其他浏览器中不工作…你的页面上有溢出:隐藏样式吗?你有什么移动设备?是安卓吗?是安卓3还是更低版本?如果您告诉我们哪个设备不工作,那么我们可能可以帮助您。我可以在windows phone上的IE中滚动fancybox内容。