1

我正在使用两个 jQuery 插件：sidr（用于左侧菜单）和 fancybox（用于显示一些文章内容）。

这两个插件在桌面版本中运行良好，但我的网站有一个移动版本，在某些浏览器的这个移动版本中我遇到了问题。

我无法在fancybox 中向下滚动我的内容，也无法在我的sidr 左侧菜单中向下滚动我的菜单项。

你知道为什么会这样吗？

我已经尝试使用 -webkit-overflow-scrolling: touch;但我从未成功过。

在这里，我有我的 fancybox 演示：

http://jsfiddle.net/qVrLr/112/

在桌面版本中，当我单击“阅读更多”打开fancybox 时，我的网站内容被阻止，我可以毫无问题地滚动我的fancybox。

在移动设备中，当我单击“阅读更多”打开fancybox 时，我的网站内容没有被阻止，当我滚动fancybox 我的网站内容时。

在某些浏览器中，当我尝试滚动fancybox 时，我只是将我的网站页面滚动到fancybox 后面，但我的fancybox 不滚动...

4

1 回答 1

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();
    }

同样在关闭时调用 unblock()。（Fancybox 必须有打开和关闭的事件）

ScrollBlocker 对我来说效果很好！

来源 - 我之前遇到过这个问题，花了很多时间才找到一个确切的解决方案。ScrollBlocker 类是使用 stackoverflow 上的答案实现的，但这是几个月前的事了，所以我找不到有帮助的问题。

于 2014-08-22T19:14:16.407 回答