div 如何加滚动条?

div 如何加滚动条?,第1张

div 加滚动条的两种方法:

一、

<div style=" overflow:scrollwidth:400pxheight:400px”></div>

记住宽和高一定要设置噢,否则不成的

不过在不超出时,会有下面的滚动条,所以不是最好的选择

二、

<div style=" overflow-y:autooverflow-x:autowidth:400pxheight:400px”></div>

记住宽和高一定要设置噢,否则不成的

这样比较好的是,在宽和高不超出时,只是一条线

三、说明

直接为div指定overflow属性为auto即可,但是必须指定div的高度,如下:

<div style="position:absoluteheight:400pxoverflow:auto">

</div>

如果要出现水平滚动条,则: overflow-x:auto

同理,垂直滚动条为: overflow-y:auto

如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative

在css设置可改变大小的div滚动条样式方法:

1.首先新建html文档,进入代码书写界面。

2.在</head>和<body>的里面写入代码,在<div>里面写入想要输入的内容</div>。

3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}

这里主要是设置外层轨道的形状和颜色。

4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}

这里主要是设置内层轨道的形状和颜色。

5.代码工作做完后,就可以查看效果,效果如下红框所示,滚动条设置完成。

div

加滚动条的方法:

div

设置滚动条显示:overflow

:yes

div

设置滚动条自适应显示:overflow

:auto

div

设置上下滚动条显示:overflow-y

:yes

div

设置上下滚动条自适应显示:overflow-y

:auto

如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11686651.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存