如何将滚动条从组件的右边框移开答案

【问题标题】：How to move the scrollbar away from the right border of a component如何将滚动条从组件的右边框移开
【发布时间】：2022-06-10 18:37:37
【问题描述】：

在应用程序中，我以表格形式显示数据。

主要列在代表父组件的红框中分组。我想在可滚动区域外的右侧添加一个额外的摘要列。

我尝试的是使用overflow-x:visible，但它不像这里解释的那样工作： https://www.brunildo.org/test/Overflowxy2.html

如何使用纯 html/css 解决方案来处理这个问题？

.parent {
  border:2px red solid;
  height:400px;
  overflow-y:scroll;
  overflow-x:visible;
  width:500px;
}

.child {
  background:green;
  height:50px;
  margin-bottom:2px;
  width:600px;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

【问题讨论】：

您可能需要删除宽度或在右侧添加另一个表格

标签： html css layout scrollbar overflow

【解决方案1】：

.parent {
  border:2px red solid;
  height:400px;
  overflow-y:scroll;
  overflow-x:visible;
  width:500px;
}

.child {
  background:green;
  height:50px;
  margin-bottom:2px;
  width:600px;
}
.p1{
  display:flex;
  
  width:500px;
    
}
.p2{
  background:red;
  width:50px;
  text-align:center;
}

<div class="p1">
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
  <div class="p2">
  ggg
  </div>
  
  </div>

我给样品。你喜欢这样

【讨论】：

它没有按预期工作，当我使用蓝色滚动条时，绿线（也在滚动条的右侧）应该相应移动

【解决方案2】：

我不认为你可以让滚动条不在右边缘，至少不仅仅是 HTML 和 CSS。这是我能得到的最接近的地方

body {margin: 0} * {box-sizing: border-box} /* IGNORE */

.parent {
  background: red;
  height: 100vh;
  width: 80vw;
}

.inner {
  height: 100%;
  width: 100vw;
  overflow-y: scroll;
}

.child {
  background: rgba(0,180,60, 0.5);
  border: 2px solid rgb(0,180,60);
  margin:5px;
  
  height: 50px;
  width: calc(100% - (5px * 2)); /* Account for margin */
}

<div class="parent">
  <div class="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

【讨论】：

【解决方案3】：

最后，我找到了适合我的滚动条问题的解决方案。

以下修改是必要的：

父级的width 必须等于子级的width
父级的overflow-y 必须设置为overlay。
指定200px的滚动条的width。
使用滚动条自定义来获得比使用大 border-right: 190px 和 background-clip: content-box 的滚动条更细的轨道和拇指。

我觉得还是可以优化的

.parent {
  border:2px red solid;
  height:400px;
  overflow-y:overlay;
  width:600px;
}


.parent::-webkit-scrollbar {
    width: 200px;
}

.parent::-webkit-scrollbar-track {
    background:yellow;
    background-clip: content-box;
    border-right: 190px solid transparent;
}

.parent::-webkit-scrollbar-thumb,
.parent:hover::-webkit-scrollbar-thumb {
  background-color:blue;
  background-clip: content-box;
  border-right: 190px solid transparent;
}

.child {
  background:#C4FFCE;
  font-size:20px;
  height:50px;
  margin-bottom:2px;
  padding-top:10px;
  width:600px;
}

<div class="parent">
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
  <div class="child">long long long long long long longlong long long long long long long text</div>
</div>

【讨论】：

【解决方案4】：

如果您想在一列中显示数据，列表，<ul> 或 <ol> 通常是语义正确的选择。要在多列中显示数据，就像这里的情况一样，您需要<table>。

<table>
  <tr>
    <td>first col</td>
    <td>second col</td>
  </tr>
...
</table>

table {
  table-layout: fixed;
}
tr > td {
  width: 100vw
}

【讨论】：