我想在html中弄一个水平的滚动条怎么弄？

Posted 2023-04-29

如题

1、在html中定义好一个dom标签，可以是body或者div等等。
2、给dom元素设置相应的宽度，可以用style中的width。
3、再给dom元素设置overflow属性，水平滚动条就是overflow-x:scroll。这样当元素中的内容超出设置的宽度时就会出现滚动条。
示例：
<div style="overflow-x:scroll;width:200px;white-space:nowrap;">当内容超出设定的宽度时自动出现横向滚动条</div> 参考技术A 如果你的网页足够宽
一个页面显示不了的话
就会自动产生一个滚动条的

或者你想强制显示的话可以如下：
overflow-x:auto;overflow-y:hidden
强制隐藏竖直滚动条。 参考技术B 很简单，用CSS样式把水平滚动条隐藏起来。但是这个兼容性我还没有测试过。
水平滚动条隐藏： htmloverflow-x:hidden
同理,竖直滚动条隐藏：htmloverflow-y:hidden 参考技术C <style type="text/css">
<!--

.scrollbar
FONT-SIZE: 12px;
scrollbar-face-color:#FAFAFA;
scrollbar-shadow-color:#E0E0E0;
scrollbar-highlight-color:#E0E0E0;
scrollbar-3dlight-color:#FAFAFA;
scrollbar-darkshadow-color:#FAFAFA;
scrollbar-track-color:#FAFAFA;
scrollbar-arrow-color:#E0E0E0;
overflow-y:auto;
width:99%;

-->
</style>
<div align="left" class="scrollbar" style="width:400px;height:50px">
dfsgsdafsdafasdfsdfsdfsadfsdfadfsgsdafsdafasdfsdfsdfsadfsdfadfsgsdafsdafasdfsdfsdfsadfsdfadfsgsdafsdafasdfsdfsdfsadfsdfadfsgsdafsdafasdfsdfsdfsadfsdfadfsgsdafsdafasdfsdfsdfsadfsdfadfsgsdafsdafasdfsdfsdfsadfsdfadfsgsdafsdafasdfsdfsdfsadfsdfadfsgsdafsdafasdfsdfsdfsadfsdfadfsgsdafsdafasdfsdfsdfsadfsdfa
</div>本回答被提问者采纳 参考技术D 给你的框架设置一个宽度，再加上style="display:block;overflow:auto"试试，如果要垂直的就设置高度

如何设置HTML滚动条

参考技术A

设置HTML滚动条方法如下：

css属性  overflow-y:auto; DIV里面的内容超过DIV的高度，右边就会自动出现滚动条

1、用一个div，定制成图中的宽度和高度

2、然后再把div的样式设成overflow-y:scroll，当div里的文字超出那个高度的时候，滚动条就出来了。

例如：

<div style="width:100px; height:100px; overflow:auto; border:1px solid #000000;"><img src="" style="width:300px; height:300px;"></div>

示例如下：