通过 jQuery 以编程方式设置滚动时不要阻止滚动动画

Question

这是我将在下面详细描述的情况的完整代码笔： https://codepen.io/Adam0410/full/MGXjaz/

代码笔中包含的JavaScript(问题的核心(如下：

var collapsed = false;
$(window).scroll(function(){
var scroll = window.pageYOffset || document.documentElement.scrollTop;
if (scroll > 207 && !collapsed) {
$("#header").css({
position: "fixed",
height: "50px",
"line-height": "50px"
});
$("#content").css("margin-top", "207px");
$(document).scrollTop(scroll - 50);
collapsed = true;
} else if (scroll < 155 && collapsed) {
$("#header").css({
position: "static",
height: "257px",
"line-height": "257px"
});
$("#content").css("margin-top", "0");
$(document).scrollTop(scroll + 50);
collapsed = false;
}
});

我正在尝试制作一个大标题，它是文档流的一部分，然后当您向下滚动经过它时，它会变成一个较小的固定标题。我希望在此过程中用户滚动的操作是平滑的。

如果您在移动设备上查看笔(或使用 chrome 的设备工具栏(平滑滚动，并在标题更改的断点周围缓慢滚动，您可以看到它完全平滑。

但是，如果您在桌面上查看它(再次使用 chrome 或任何其他浏览器(，则使用滚轮滚动将以 100 像素为增量完成。出于这个原因，如果您滚动标题更改的断点，您可以看到它并不平滑。

发生这种情况是因为 100 像素滚动不会立即发生，并且在更改文档的 scrollTop 的过程中，100 像素滚动动画被取消。设置了 scrollTop 属性后，有什么方法可以检测并恢复此滚动动画吗？

Answer 1

请检查 https://codepen.io/anon/pen/PeabEL

将 js 更改为

$(window).scroll(function(){
var scroll = window.pageYOffset || document.documentElement.scrollTop;
var newHeight = 50;
if(257-scroll>50)
newHeight = 257-scroll;
$("#header").css({
position: "fixed",
height: newHeight+"px",
"line-height": newHeight+"px",
}); 
});

还添加了

#content {
...
margin-top:257px;
}

和

#header {
...
position: fixed;
}

Answer 2

在一个名为smoothwheel的非常小的插件的帮助下，我有另一种方法(在这里获取(。我扩展了@Rohith穆拉利的答案并创建了一个示例。看看这里：

https://codepen.io/anon/pen/NMBdpx

该插件本身使您能够流畅地滚动，对性能的影响很小。这符合您的需求吗？