CSS Zoom 干扰 jQuery scrollTop答案

【问题标题】：CSS Zoom interfering with jQuery scrollTopCSS Zoom 干扰 jQuery scrollTop
【发布时间】：2013-12-06 13:01:49
【问题描述】：

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

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 */

这曾经可以正常工作，但由于明显的原因不适用于我的缩放。我试过将它乘以缩放级别，但它不起作用。你有什么建议吗？

【问题讨论】：

也许你的scrollingAnim 没有定义，var scrollingAnim;。你检查过错误吗？我也不明白为什么你需要同时使用e.preventDefault(); 和return false;。
有演示吗？解决问题会容易很多
offset().top 随着窗口滚动的变化而变化，这是错误的。我不知道我们如何解决这个问题，除了将窗口滚动返回到 0 然后再次请求 offset().top

标签： javascript jquery

【解决方案1】：

当您涉及 CSS 缩放时，jQuery 的 .offset().top 会随着窗口滚动的变化而变化...

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

【讨论】：

【解决方案2】：

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

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

zoom < 1.

【讨论】：