HTML / CSS在页面底部添加水平滚动条

Question

我有一个全屏大屏幕的网页。行数固定为20。它应该可以水平滚动。目前，我使用溢出功能获取水平滚动条。

 overflow: 'hidden', overflowX: 'scroll',

但是我需要向下滚动才能看到水平滚动条。我想将滚动条固定在页面底部。因此它始终可见，并且用户可以轻松浏览表。例如，请参见下图。如何添加这样的滚动条？

PS：我正在使用react-semantic-ui

Answer 1

只需在div内放置一个div。只要设置了子div的宽度，它就会溢出并且滚动条会出现，我想这就是您想要的。如果需要设置外部div的高度，请使用height：100vh，因此将外部div设置为视口的高度。

希望有帮助。

<div style="overflow-x: scroll; overflow-y: scroll; height: 150px; ">
  <div style="width: 800px; background-color: blue;">

    <br/>Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test 
    <br/>Test
    <br/>Test 
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
  </div>
</div>