平滑滚动不适用于溢出-y答案

【问题标题】：smooth scroll does not work with overflow-y平滑滚动不适用于溢出-y
【发布时间】：2015-11-20 15:42:51
【问题描述】：

我正在尝试使用平滑滚动并采用我在网上找到的示例。这是我的代码的一个小提琴

我为 html 和 body 设置了特殊条件（基本上是为了将页面上下文从顶部偏移 50px 以避免导航栏）。因此平滑滚动不起作用。有谁知道解决这个问题？谢谢卡尔

$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 2000);
    return false;
}); 
});

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

这就是你所追求的吗？

$(document).ready(function () {
    if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
        $('html').css({'overflow-x':'auto','overflow-y':'hidden'});
    }
    $('a[rel="relativeanchor"]').click(function () {
        var $el = $($(this).attr('href'));
        $('html, body').stop().animate({
            scrollTop: $el.prop('offsetTop')
        }, 2000);
        return false;
    });
});

JSFiddle

CSS 需要更新。 chrome 的 html 溢出已被删除，否则，这在 Chrome 中将不起作用。但是，Firefox 需要溢出，因此它们是通过在 JavaScript 中动态设置来完成的（如果不是 chrome，则设置）。

如果要保持偏移量，请从计算的偏移量中减去它。鉴于上述情况，$el.prop('offsetTop') - 50 在上方增加了 50px。

【讨论】：

【解决方案2】：

该问题似乎与 Chrome 滚动 <body> 和 height:100% 的方式不同有关。关于这个问题的讨论在这里：Body set to overflow-y:hidden but page is still scrollable in Chrome

一个可行的解决方案是将滚动内容包装在<div class="content"> 中并禁用<body> 上的滚动。

这是一个 JSFiddle 来演示更新的行为：https://jsfiddle.net/f1zv1c5k/5/

要让滚动在适当的点停止，您需要在滚动时减去应用于<html> 标签的垂直偏移量（使用@vol7ron 推荐的$el.prop('offsetTop')）。您的平滑滚动功能如下所示：

$('a[rel="relativeanchor"]').click(function(){
    var $el = $($(this).attr('href'));
    $('.content').animate({
        scrollTop: $el.prop('offsetTop')
    }, 2000);
    return false;
});

【讨论】：

感谢您对此进行调查...您的小提琴似乎仍然表现出相同的行为？
在我的浏览器（Firefox 42.0、Windows 10）中，我的 Fiddle 向下滚动到第 1 节，当它停止滚动时内容可见，您的 Fiddle 将上下文传递了 50 像素。你看到了什么不同的东西吗？还是我解决了错误的问题？
哦！您是否试图在用户向下滚动页面时保持导航栏可见？试试这个小提琴，看看它是否是你所追求的行为：jsfiddle.net/5nbdnumh
对不起，我从你的开始，打算让@carl投票给你，因为它更简单，但后来我没有看到你的答案，并从它开始解决我希望的问题问题（导航栏保持固定的位置）。如果可行，我一定会引用您作为$el.prop('offsetTop') Fiddle 的来源。
不用担心，只是好奇我们是否得到了相同的答案。它在 Chrome 中无法正常工作