javascript - 如何制作一个跟随浏览器窗口但在其容器末尾停止的箭头？

Question

我目前正在尝试实现向下滚动箭头。通常这是一个简单的步骤，但这次却很复杂。因为我的客户想要一个具有固定高度的图像的主页，所以主页标题(由图像高度定义的大小)有时比浏览器窗口大，有时不是。如果窗口更大，我想将滚动条向下滚动到浏览器窗口。如果没有，它不应该溢出标题之外的主页标题。

这是我的代码:

#wrapper {
  resize: both;
  overflow: auto;
  max-width: 400px;
  border: 2px solid black;
  display: block;
}

#header {
  position: relative;
}

#scroll-down {
  position: absolute;
  bottom: 0;
  margin: auto;
  font-size: 40px;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  width: 100%;
}

img {
  width: 400px;
}

<div id="wrapper">
  <div id="header">
    <img src="https://images.unsplash.com/photo-1524821065909-083ad70f4743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
    <div id="scroll-down">˅</div>
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

如果浏览器窗口/ View 比标题长，第一个可能的位置应该在底部。在这种情况下，箭头卡在标题窗口的末尾:



第二个位置应始终位于浏览器窗口/ View 的末尾，以防标题图像太长而无法在 View 中完全可见:



我怎样才能做到这一点？是否有仅 CSS 的解决方案，还是我也需要一些 JavaScript？我从来没有做过这样的事情，所以我很高兴听到你的想法。

Answer 1

position:sticky可以这样做:

#wrapper {
  max-width: 400px;
  border: 2px solid black;
}

#scroll-down {
  position: sticky;
  bottom: 10px; /* you can use 0 or a small offset */
  font-size: 40px;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  width: 100%;
  margin-top: -47px; /* this is the height of the arrow */
}

img {
  width: 400px;
}

<div id="wrapper">
  <div id="header">
    <img src="https://images.unsplash.com/photo-1524821065909-083ad70f4743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
    <div id="scroll-down">˅</div>
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

如果你不知道箭头的高度，你可以使用下面的另一个技巧:

#wrapper {
  max-width: 400px;
  border: 2px solid black;
}

#scroll-down {
  position: sticky;
  bottom: 10px;
  font-size: 40px;
  color: #ffffff;
  cursor: pointer;
  height:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

img {
  width: 400px;
}

<div id="wrapper">
  <div id="header">
    <img src="https://images.unsplash.com/photo-1524821065909-083ad70f4743?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
    <div id="scroll-down">˅</div>
  </div>
  <div id="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>