水平滚动不在元素末尾

Question

有一个高度为150vh的#horizontal_scroll元素。它有一个比父元素宽 2 倍的子元素。元素#horizontal_scroll 的水平滚动显示在元素的末尾（如果将页面滚动到底部）。是否可以不在元素末尾（150vh）而是在屏幕末尾（100vh）显示此滚动？

#horizontal_scroll {
  background: grey;
  width: 50vw;
  height: 150vh;
  overflow: auto;
}
#horizontal_scroll div {
  width: 100vw;
}

<div id="horizontal_scroll">
<div></div>
</div>

Answer 1

为了获得所需的行为，水平滚动出现在屏幕末尾（100vh）而不是元素末尾（150vh）

body {
  margin: 0;
  height: 200vh; /* To allow enough space for scrolling */
}

#horizontal_scroll {
  background: grey;
  width: 50vw;
  height: 150vh;
  overflow-x: auto; /* Allow horizontal scroll */
  overflow-y: hidden; /* Hide vertical scroll */
  position: -webkit-sticky;
  position: sticky;
  top: 100vh; /* Stick to the bottom of the viewport */
  height: 50vh; /* Adjust height so it's visible */
}

#horizontal_scroll div {
  width: 100vw; 


<div id="horizontal_scroll">
  <div></div>
</div>