防止窗口滚动低于折叠,直到按钮点击
问题描述:
我有一个情况,我需要的页面不能滚动过去的某个点(我有英雄设置为100vh,用户应该不能滚动的所有),然后点击一个按钮后,滚动阻止功能被禁用,然后用户自动平滑滚动到正下方的锚链接(基本上向下滚动100vh或完整的窗口高度)。我需要一个平滑的滚动动画,而不是一个快速跳跃。防止窗口滚动低于折叠,直到按钮点击
我试着玩弄以下代码的变体,没有运气。到目前为止,它实际上是越野车,并跳转,当你重新加载页面身体溢出被设置为隐藏,但窗口的位置并不总是在屏幕的顶部,所以你仍然看到一些下面的折叠内容,但仍不能滚动。
function() {
function smoothScroll(){
windowHeight = $('window').height();
$('html, body').stop.animate({scrollTop: windowHeight}, slow);
}
$('.bottom-nav').on('click', '.fold-trigger', function(event) {
$('.home').css('overflow', 'visible');
setTimeout(smoothScroll(), 1000);
});
};
答
固定码
function smoothScroll(){
windowHeight = $(window).height();
$('html, body').stop().animate({scrollTop: windowHeight}, "slow");
}
$('.bottom-nav').on('click', '.fold-trigger', function(event) {
$('.home').css('overflow', 'visible');
setTimeout(smoothScroll(), 1000);
});
固定小提琴:https://jsfiddle.net/yxkvnymu/2/
说明
您试图通过执行$('window').height()
来获取窗口高度,该搜索是搜索不存在的“窗口”DOM元素。您想使用$(window).height()
(注意忽略窗口周围的引号),因为window
不是DOM节点,它是一个对象。
此外,您正在使用其中有多个错误。 .stop
是无效的,因为从$('html, body')
返回的NodeList上的stop
属性是您想要调用的函数。你应该使用$('html, body').stop()
。
此外,animate
部分引用变量slow
。 jQuery的动画功能需要"slow"
作为一个字符串,所以该行应该写成这样:因为我们要的"slow"
一个字符串值传递给jQuery的动画功能
.animate({scrollTop: windowHeight}, "slow");
注意在报价的包容,而不是变量slow
。
最后,你将所有的代码都放在一个匿名函数中,这似乎没有必要。