html自定义横纵向滚动条,html的滚动条样式设置

html自定义横纵向滚动条,html的滚动条样式设置如果需要对DIV设置一个滚动条,那么你可能需要设置滚动条的样式,横向或者纵向,需要用overflow-y和overflow-x来设置,今天就来给大家说一下这俩个属性。对div设置滚动条,设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏,overflo…

5268f80b9b1e01f982625ef6fac83ca1.png

如果需要对DIV设置一个滚动条,那么你可能需要设置滚动条的样式,横向或者纵向,需要用overflow-y和overflow-x来设置,今天就来给大家说一下这俩个属性。

对div设置滚动条,设置其横向滚动条和纵向滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以使用CSS样式设置html框架iframe的滚动条隐藏,

overflow-y:scroll; 总是显示纵向滚动条

overflow-y:visible : 不剪切内容也不添加纵向滚动条

div设置滚动条实例

通过对第一个DIV对象设置div宽度、div高度、div边框样式,并在DIV盒子里添加演示文字内容,第二个盒子设置相同的CSS样式,盒子文字内容相同,并设置横向和纵向滚动条,观察效果。

第一个盒子CSS命名为“divcs5-a”,第二个DIV盒子样式选择器命名为“div-b”。

1、具体完整html源代码如下:

div滚动条 在线演示

.div-a,.div-b{ width:150px; height:100px; float:left; border:1px solid #F00}

.div-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;}

/* css注释说明:设置第二个盒子与第一个盒子间距为10px,并设置了横纵滚动条样式 */

测试内容测试内容测试内容测试内容测试内容测试内容测试内容

测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容

测试内容测试内容测试内容测试内容测试内容

测试内容测试内容测试内容测试内容测试内容测试内容测试内容

测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容

测试内容测试内容测试内容测试内容测试内容

为了观察效果我们对两个DIV盒子都设置基础相同的CSS样式和相同的文字内容。对“.div-b”设置了X和y(横向和纵向的滚动条样式。)

说明:第一个盒子“.div-a”内容过多而溢出了DIV盒子,第二个盒子设置了滚动条样式,所以没有溢出,纵向右侧(Y)出现了可下拉上拉滚动条样式,横向底部(X)出现滚动条效果但不可左右拉动,这是因为文字内容不能撑开DIV宽度,如果是大于DIV设置宽度的图片这样横向底部(X)就会出现滚动条效果。

相关推荐:

链接样式怎么用CSS设置

HTML里的checkbo怎么使用

HTML标题标签元素怎么修改

今天的文章html自定义横纵向滚动条,html的滚动条样式设置分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/27471.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注