当前位置： 文江博客话题详情

如何将卷轴从组成部分的右边界移开

发布于 2025-02-06 03:35:03 字数 1847 浏览 3 评论 0原文

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

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

我尝试的是使用Overflow-X：可见，但它无法如下所述： https://www.brunildo.org/test/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>

原文

In an application I display data in table form.

The main columns are grouped in the red frame representing the parent component. I want to add an additional summary column on the right outside the scrollable area.

what I tried is to play with the overflow-x:visible, but it doesn't work as explained here :
https://www.brunildo.org/test/Overflowxy2.html

How can I handle this with a pure html/css solution ?

enter image description here

.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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

池予 2025-02-13 03:35:04
.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>

i am giving sample . you do like this

.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>

i am giving sample . you do like this

回复 原文
我只土不豪 2025-02-13 03:35:04

我认为您不能拥有它，以便至少不仅在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>

I don't think you can have it so that the scrollbar isn't on the right edge, at least not just with HTML and CSS. Here is the closest I could get

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>

回复 原文
冷情妓 2025-02-13 03:35:04

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

必须进行以下修改：

  • 父的width必须等于孩子的
  • y必须设置为覆盖。
  • 指定200px的卷轴的宽度。
  • 使用Scrollbar自定义具有更薄的轨道＆amp;使用大型边界权利：190px和background-clip：content-box的拇指。

我认为它仍然可以优化

”在此处输入图像说明”

.parent {
  border:2px red solid;
  height:300px;
  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 {
  display:table-row;
  font-size:20px;
  height:50px;
  margin-bottom:2px;
  padding-top:10px;
  width:600px;
}

.column--1,
.column--2 {
  background:#C4FFCE;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  width:150px;
}

.column--1 {
  width:435px;
}

.space {
  width:55px;
  }
<div class="parent">
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>  
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
</div>

Finally, I found a suitable solution for my scrollbar problem.

the following modifications are necessary:

  • the width of the parent must be equal to that of the child
  • the overflow-y of the parent must be set to overlay.
  • specify a width of the scrollbar of 200px.
  • use the scrollbar customization to have a thinner track & thumb than the scrollbar using a large border-right: 190px and the background-clip: content-box.

I think it can still be optimized

enter image description here

.parent {
  border:2px red solid;
  height:300px;
  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 {
  display:table-row;
  font-size:20px;
  height:50px;
  margin-bottom:2px;
  padding-top:10px;
  width:600px;
}

.column--1,
.column--2 {
  background:#C4FFCE;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  width:150px;
}

.column--1 {
  width:435px;
}

.space {
  width:55px;
  }
<div class="parent">
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>  
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
  <div class="child">
    <div class="column--1">column 1</div>
    <div class="space"></div>
    <div class="column--2">column 2</div>
  </div>
</div>

回复 原文
Smile简单爱 2025-02-13 03:35:04

如果要在一列中显示数据，请列表，＆lt; ul＆gt;或＆lt; ol＆gt;在语义上是正确的选择。要在多个列中显示数据，与此处一样，您需要一个＆lt; table; gt;。

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

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

If you want to display data in one column, lists, either <ul> or <ol> are ususally the semantically correct choice. To display data in more than one column, as it's the case here, you need a <table>.

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

table {
  table-layout: fixed;
}
tr > td {
  width: 100vw
}
回复 原文
~没有更多了~

关于作者

情定在深秋

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文