Question

采用以下示例： https://jsfiddle.net/atg5m6ym/5079/

在这里，您需要向下滚动一下以查看消息＆＃34;您好！＆＃34;。我还动画了一个div来向下移动到屏幕之外：

$("div").animate({top: '3000px'}, 6000);

您可以看到滚动条如何变化，我们现在有一个更大的页面可以滚动。

现在，我希望用户能够向下滚动到＆＃34; Hello！＆＃34;文本，如果文本超出用户的屏幕。但是，我不希望div一旦到达屏幕底部就延伸垂直滚动条。相反，我希望div继续向下移动到屏幕之外，滚动条保持不变。这样，滚动条就无法跟随它。

做＆＃34;溢出-y：隐藏＆＃34;会阻止用户按自己的选择向下滚动并阅读＆＃34; Hello！＆＃34;有什么我可以用JS（最好是jQuery）或CSS来完成这两件事吗？

编辑：我仍然希望div存在，所以我不想淡出它。如果我有一个后来返回的div或者在椭圆轨道上行进，我希望它在重新进入屏幕时仍然重新出现，但不会影响滚动条。

Answer 1

这将使div移动到段落的Y位置，然后逐渐淡出：

$(document).ready(function() {
    var p_pos = $("p").offset().top;
    $("div").animate({top: p_pos}, 6000).fadeOut();
});

好的，请尝试以下方法：

<div id="everything">
  <div id="orb"></div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br>
  <p>
  Hello!
  </p>
</div>

在你的CSS中：

#everything {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 800px;
  max-height: 800px;
  overflow-y: hidden;
  background-color: #ccc;
}

确保动画$（＆＃34;＃orb＆＃34;）而不只是$（＆＃34; div＆＃34;）（并在你的css中重命名。

Answer 2

你去吧。只需添加到正文并将div位置设置为

body {
overflow: hidden
}
div {
bottom: 0;
}
https://jsfiddle.net/atg5m6ym/5082/

阻止div扩展滚动条

2 个答案: