Javascript阻止滚动条跳跃
Javascript stopping scroll from jumping
我有一个页面,你可以点击从页面顶部滑下一个元素。
我试图创建一个规则,说如果向下推是可见的,屏幕已经滚动到比向下推的高度,那么它应该再次隐藏。这意味着用户必须按下按钮才能再次显示。
在我的HTML中我有:
<div class="row" id="learn-more" style="display:none">
<div class="small-12 columns" id="close">
<p id="close-learn">
<i class="fa fa-times pull-right fa-2x"></i>
</p>
</div>
<div class="small-12 columns" id="learn-content">
<h1>Content for Pushdown</h1>
</div>
</div>
<div class="row" id="hero">
<div class="small-12 columns small-centered">
<p id="learn"><a class="transition">Learn More</a></p>
</div>
</div>
在我的Javascript中我有:
// Open and close learn more section
$("#learn").on("click", function() {
$("#learn-more").slideDown();
});
$("#close-learn").on("click", function() {
$("#learn-more").slideUp();
});
// Close learn-more based on scroll position
$(window).on("scroll", function() {
var scrollPosition = $(window).scrollTop();
if ($("#learn-more").is(":visible") && scrollPosition > $("#learn-more").height()) {
$("#learn-more").slideUp()
}
});
这些都有效,但是当#learn-more元素向上滑动时,页面向下跳跃大约500像素,这是#learn-more元素的高度。我希望我的工作方式与Airbnb的新主页一样,当你点击"它是如何工作的"按钮,然后在下推元素下方滚动。
如有任何建议将不胜感激。
似乎出现这种情况是因为$(window)。scrollTop的位置在slideUp()被调用后保持不变。但是我们可以记住Learn More按钮相对于窗口顶部的可见位置,并在隐藏文本块后返回到该位置。另外,我建议在这里使用hide()而不是slideUp()。
下面是我对滚动条的建议: $(window).on("scroll", function(event) {
var scrollPosition = $(window).scrollTop();
var learnMore = $("#learn-more");
if (learnMore.is(":visible") && scrollPosition > learnMore.height()) {
var learnMoreButtonTop = $("#learn").offset().top - scrollPosition;
learnMore.hide();
$(window).scrollTop(learnMoreButtonTop);
}
});
工作示例相关文章:
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- 在firefox和chrome中的左侧显示iframe滚动条
- jquery:将动画绑定到滚动条位置的更好方法
- 在窗口中添加滚动条
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 使用没有插件的javascript自定义滚动条
- CodeMirror.禁用垂直滚动条
- 在滚动时,在隐藏滚动条和隐藏溢出的同时触发事件
- 可以'无法使滚动条正常工作
- 强制滚动条覆盖页面内容
- 如何隐藏滚动条,但希望它继续工作
- 滚动所有嵌套的滚动条,使HTML元素进入视图
- 使用浏览器滚动条而不是iframe滚动条
- 滚动条在关闭引导对话框后消失
- javascript/获取滚动条位置的回调
- 可调整滚动条大小
- 去掉滚动条
- ext-js网格面板滚动条不适用于jquery
- Javascript阻止滚动条跳跃