强制水平滚动条使可滚动div呈现在屏幕上

Question

我的数据表很长，也可以水平溢出其固定宽度的容器。在水平溢出时，容器设置为滚动。这是可行的，但是因为数据表太长，容器水平滚动条通常不在屏幕底部，因此用户没有指示可以水平滚动表。可以强制滚动条在屏幕上渲染吗？

.container {
  margin: auto;
  max-width: 400px;
  overflow: auto;
}

.box { 
  height: 5000px;
  width: 5000px;
  
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 200px 200px;
  background-position: 0 0, 0 100px, 100px -100px, -100px 0px;
}

<div class="container">
  <div class="box">Scroll to the very bottom to see horizontal scrollbar</div>
</div>

Answer 1

滚动条不在屏幕底部。它在元素的底部。如果希望滚动条在屏幕上显示更高，请减小元素的高度。元素本身实际上没有滚动条，仅出现一个是浏览器在内容超出视口时生成的滚动条。

要完成所需的操作，请将容器设置为视口的大小，然后将内容放入其中。

body{
  margin: 0;
}

.container {
  height: 100vh;
  width: 100vw;
}

.box {
  height: 200%;
  width: 200%;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 200px 200px;
  background-position: 0 0, 0 100px, 100px -100px, -100px 0px;
}

<div class="container">
  <div class="box">Scroll to the very bottom to see horizontal scrollbar</div>
</div>