html - 我想让滚动条与滚动条拇指一起在 div 中始终可见
问题描述
我在 div 上实现滚动加载,它运行良好,但用户也可以删除其中的元素。我希望该 div 始终可滚动,但如果用户从中删除元素,滚动条就会消失。
我已经尝试过overflow-y: scroll
并且也增加了高度。它有效:滚动条始终可见,但滚动条没有拇指,这意味着我无法通过鼠标滚轮或使用滚动条上的箭头滚动。
因此,如果有人可以帮助我使滚动条拇指始终可见,那就太好了。
这是我正在谈论的div:
<div id="external-events" class="mt-actions" style="height: 530px; width: auto; overflow-y: scroll;"></div>
解决方案
请使用溢出隐藏,直到鼠标悬停在它上面,然后将其设为自动。请注意 16px 填充假定滚动条为 16px 宽,并且存在因此当滚动条出现时文本不会重新换行
代码片段如下
div.myautoscroll {
height: 40em;
width: 40em;
overflow: hidden;
border: 1px solid #444;
margin: 3em;
}
div.myautoscroll:hover {
overflow: auto;
}
div.myautoscroll p {
padding-right: 16px;
}
div.myautoscroll:hover p {
padding-right: 0px;
}
<div class="myautoscroll">
<p>
This is a test for the stackoverflow question by Mathan
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tincidunt
odio sit amet eleifend. Nullam mattis posuere est, ut hendrerit ipsum ultrices
non. Aliquam erat volutpat. Aliquam hendrerit, odio at euismod fermentum, arcu
nunc sagittis enim, eget malesuada nulla risus rhoncus massa. In in varius
metus. Mauris consequat leo a sem pretium sodales. Cras facilisis porttitor
ultrices. Sed ipsum metus, luctus sit amet blandit at, facilisis vel mauris.
Morbi leo turpis, congue dignissim imperdiet eu, laoreet mattis turpis.
</p>
<p>
Etiam eu velit magna, et euismod ligula. Aenean non ligula at tortor accumsan
blandit eget ut lacus. Vivamus commodo nunc egestas dolor sagittis rutrum
egestas metus sagittis. Pellentesque mollis eros ut nisl auctor tincidunt. Cras
ullamcorper ultricies arcu, id tincidunt ligula cursus eget. Ut accumsan, dolor
et ultricies consequat, urna lacus blandit massa, nec vestibulum sapien sapien
sed sem. Nunc mattis lorem ornare mauris viverra vel mattis mi euismod. Vivamus
quis neque massa. Integer at est diam, vel molestie libero. Donec non ipsum non
mauris posuere auctor. Quisque ac sapien sit amet diam elementum sagittis quis
et urna. Maecenas adipiscing orci sed dui eleifend bibendum.
</p>
<p>
Suspendisse massa tortor, sagittis dignissim sodales vitae, porta id lorem.
Aliquam at enim non libero consequat blandit. Nunc eleifend fermentum diam
vitae condimentum. Aliquam molestie magna ut purus malesuada a rhoncus orci
aliquet. Sed lacus ante, fringilla ut accumsan non, fermentum eu nibh.
Phasellus quis nisi sem, at hendrerit eros. Proin faucibus sollicitudin
tristique. Donec et velit magna. Sed eu dolor eu dui fermentum aliquet. Etiam
sollicitudin egestas dui iaculis tempor. Aliquam quis mauris in augue luctus
condimentum ut quis turpis. Donec porttitor, sapien non interdum dignissim,
arcu nunc ullamcorper nisi, at sagittis enim nisi fringilla risus. Nulla vel
ipsum nulla. Aliquam fringilla quam dapibus sapien mattis at ornare massa
fringilla. Nullam sit amet lorem quis ipsum euismod imperdiet.
</p>
<p>
In hac habitasse platea dictumst. Fusce vitae urna id ipsum ornare molestie.
Sed non urna in lectus tempor dictum non quis metus. Phasellus at dolor eget
justo dapibus congue posuere nec dolor. Nunc hendrerit bibendum tincidunt.
Vestibulum scelerisque enim nulla, venenatis sollicitudin dui. Donec feugiat
condimentum velit, at ultrices felis sagittis elementum. Sed a massa massa,
quis scelerisque sapien. Etiam non est felis, quis imperdiet diam. Aenean felis
sapien, egestas blandit egestas non, imperdiet convallis risus. Nunc lacinia
aliquet adipiscing.
</p>
<p>
Integer eu eleifend nulla. Duis elementum malesuada lectus at pretium. Praesent
euismod nibh sit amet dui interdum nec interdum elit pretium. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis
molestie est eu nisi rutrum blandit. Nulla non luctus purus. Fusce fringilla,
dolor vel ultrices sagittis, quam purus aliquet urna, ac porta lectus velit ut
mauris. Maecenas lectus magna, imperdiet sit amet iaculis a, vestibulum nec
est. Sed tellus nibh, suscipit ut elementum vitae, venenatis placerat nibh.
Pellentesque mattis convallis iaculis. Fusce mauris ipsum, ullamcorper id
porttitor eu, luctus tincidunt lectus. Nulla facilisi. Aliquam erat mi, laoreet
nec condimentum sed, pulvinar a massa. Integer eget orci lacus, ut dapibus
arcu. Vivamus sollicitudin libero vitae libero ullamcorper interdum. Vivamus
egestas dignissim eleifend.
</p>
</div>
推荐阅读
- apache - Jenkins 用户无法将文件复制到 Apache /var/www 文件夹 - 所有权限都适用
- protocols - 重塑 PPP/SLIP 协议以在 8051 微控制器上进行无线操作
- amadeus - 是否有与 Amadeus 自助旅行解析 API 兼容的行程示例?
- java - Java 可以使用导入包中的受保护变量吗?
- php - 使用ajax提交表单时图像不刷新
- java - 在 java 语言中,如何将纳秒值(例如 1568694302232954486 和 1568703521360049938)转换为 Java Date 对象?
- javascript - javascript - 具有条件更改的嵌套字段的映射
- node.js - 更好的架构在 MongoDB 中存储多种类型的用户
- reactjs - 在 React-Select 中获取选定的值
- java - 如何在主线程下拦截 Runnable 创建和执行以使用 AspectJ 填充上下文流数据