2020年有效的只用样式css 隐藏滚动条scroll bar方法

最新推荐文章于 2024-03-04 14:58:51 发布

wm20000

最新推荐文章于 2024-03-04 14:58:51 发布

阅读量2.6k

点赞数 1

分类专栏：代码人生文章标签： html css js web

本文链接：https://blog.csdn.net/wm20000/article/details/108372628

版权

代码人生专栏收录该内容

13 篇文章 0 订阅

订阅专栏

隐藏滚动条方法，网上找到的内容大多拷贝，粘贴，很多无效，这里给出2020年可用的隐藏滚动条办法，包括横向和纵向，chrome亲测有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行居中 多行靠左</title>
</head>
<style>
    .container {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
    }
    .container::-webkit-scrollbar {
        display: none;  /* Safari and Chrome */
    }
</style>
<body style="overflow: hidden">
<div class="container" style="width: 300px; background-color: #da8ec5;
    overflow-x: scroll; white-space: nowrap;">
    横向：我是滚动显示的文字，这里有隐藏的滚动条，我的后面还有很多内容
</div>
<p></p>
<div class="container" style="width: 100px; height: 50px; background-color: #da8ec5;
    overflow-y: scroll;">
    白日依山尽，黄河入海流。欲穷千里目，更上一层楼。
</div>
</body>
</html>

wm20000

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2020年有效的只用样式css 隐藏滚动条scroll bar方法

隐藏滚动条方法，网上找到的内容大多拷贝，粘贴，很多无效，这里给出2020年可用的隐藏滚动条办法，包括横向和纵向，chrome亲测有效。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单行居中多行靠左</title></head><style> .container { -
复制链接

扫一扫