Question

我正在创建一个在移动浏览器上缩小的网站，因为它是一个固定宽度的网站。我没有使用视口元标记，而是采用了以下内容：

html, body {
    zoom: 0.8;
}

这很好用，但问题出在我的jQuery上。我正在使用简单的jQuery代码进行单页网站平滑滚动，如下所示：

/* Start Navigation */
jQuery('nav ul.menu li').click(function(e) {
    if(!scrollingAnim) {
        var page = jQuery(this).attr('data-page');

        updateMenu(page);

        scrollingAnim = true;

        jQuery('html, body').stop().animate({
            scrollTop: (jQuery(page).offset().top - 70)
        }, 2000, 'swing', function() {
            scrollingAnim = false;
        });
    }

    e.preventDefault();
    return false;
});
/* End Navigation */

这曾经很好用，但由于显而易见的原因，我的缩放功能不起作用。我已经尝试将它乘以缩放级别，但它不起作用。你有什么建议吗？

Answer 1

jQuery的.offset（）。当你涉及CSS缩放时，顶部正在改变窗口滚动...

在这里查看我的答案https://stackoverflow.com/a/21048208/1090395 希望它有所帮助

Answer 2

面临与缩放和offset().Top相关的类似问题。尝试在JS控制台中使用值并找到以下公式：

var scrollTopAnimateTo = ($(anchor).offset().top - $(".header").height()) * zoom + $(window).scrollTop() * (1 - zoom);

其中zoom < 1。

CSS Zoom干扰了jQuery scrollTop

2 个答案: