首页 > 编程知识 正文

html滚动条隐藏却有滚动效果,div隐藏滚动条,且内容可以滚动,怎么实现

时间:2023-05-06 06:53:10 阅读:263262 作者:1167

css怎么隐藏滚动条样式?

用到的属性有overflow: hidden,下面,我们用一个案例来说明实现的方法及步骤。

1、新建一个html文件,在head中写入内部CSS代码:

2、然后再body中添加一个div块:

3、为div引入一个CSS样式:

4、CSS样式,定义DIV的宽度高度,超出部分显示滚动条。代码如下:(推荐学习:CSS视频教程).scroll{

width: 300px;

height: 100px;

overflow-y: scroll;

}

5、在div中加入p标签,引入文字列表:

HTML中文网

在线学习

前端开发

资源手册

免费学习

6、打开网页,可以看到外面写入的文字,超出的文字用滚动条上下拉可以看到。

7、在我们写的带有滚动条的div外层再添加一个新的div,添加后代码如下:

HTML中文网

在线学习

前端开发

资源手册

免费学习

8、给最外层的div引入样式,设置的宽度要比内容的div要窄一点,然后设置超出的部分隐藏,这样就可以实现滚动条隐藏了。为了方便观察,我在这里给DIV添加一个灰色的边框。代码如下:.hidden{

width: 280px;

height: 100px;

overflow: hidden;

border: 1px solid #d4d4d4;

}

9、保存后刷新网页可以看到滚动条已经成功隐藏。

快三技巧准确率100中文网

在线学习

前端开发

资源手册

免费学习

8、给最外层的div引入样式,设置的宽度要比内容的div要窄一点,然后设置超出的部分隐藏,这样就可以实现滚动条隐藏了。为了方便观察,我在这里给DIV添加一个灰色的边框。代码如下:.hidden{

width: 280px;

height: 100px;

overflow: hidden;

border: 1px solid #d4d4d4;

}

9、保存后刷新网页可以看到滚动条已经成功隐藏。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。