CSS实现隐藏滚动条但是可以滚动

最新推荐文章于 2024-08-06 13:49:07 发布
最新推荐文章于 2024-08-06 13:49:07 发布
阅读量5.8w 收藏 62
点赞数 26
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36538012/article/details/89200121
版权

今天记录一个很小的问题，在工作之中会经常遇到的，当页面元素溢出的时候会产生滚动条，这个时候需要页面样式优化：CSS实现隐藏滚动条但是可以滚动。


5640239-427f98fddfc98d70.png 
body::-webkit-scrollbar {
    display: none;
}

示例代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .cont {
                width: 200px;
                height: 200px;
                border: 1px solid #000000;
                overflow-x: hidden;
            }
            
            .cont::-webkit-scrollbar {
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="cont">
            <p>王小婷</p>
            <p>王小婷</p>
            <p>王小婷</p>
            <p>王小婷</p>
            <p>王小婷</p>
            <p>王小婷</p>
        </div>
    </body>

</html>
5640239-83bb85300a34c84a.png

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。

祈澈菇凉
关注
css隐藏移动端滚动条并且ios上平滑滚动的方法
09-22
综上所述，本文介绍的知识点涵盖了如何在移动端隐藏滚动条并实现iOS上的平滑滚动，并且涉及到了移动端视口设置、兼容性考虑以及样式控制。开发者在进行移动端网页设计时，可以参考这些知识点来提升用户体验。
使用CSS实现无滚动条滚动的两种方法
09-22
理想的情况是隐藏滚动条的同时保留鼠标滚动的功能，这就涉及到无滚动条滚动的实现方法。 当前大多数的解决方案都是使用CSS的overflow属性，比如overflow:hidden或overflow-y:no，但这样会隐藏掉所有滚动内容，这并...
CSS隐藏滚动条，保留滚动功能
LMX的博客
08-18 3332
CSS隐藏滚动条，保留滚动功能 原理：设置父级为溢出隐藏，而子级不进行溢出隐藏设置同时改变子级的宽度使进度条溢出到父级外面。 设置父级overflow:hidden;是为了使父级溢出隐藏。再设置子级的y轴方向可以滚动，然后设置子级的宽度使得滚动条溢出父级元素，达到隐藏滚动条的效果（实际上是滚动条溢出） 示例： <!-- 设置外层标签的高度小于内层标签的高度，使滚动条出现 --> <div style="height: 500px; border:solid 2px red; overflo
纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
01-19
移动端 移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; } PC 端 PC 端对兼容性的要求相对来说要高一点，所有可以换一种方法，大致思路就是在内容div外面包一个父容器div，设置 overflow: hidden，内容div设置 display-x: hidden; display-y: auto; 最后设置父容器div的宽度小于内容div的宽度或者设置内容div的 marg
隐藏滚动条|隐藏scrollbar
最新发布
特仑苏的博客
08-06 292
capacitor、ionic、scrllbar
CSS 实现隐藏滚动条同时又可以滚动
dianni7443的博客
03-02 1939
移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？ 使用overflow:hidden隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar。 应用如下 CSS 可以隐藏滚动条： .element::-webki...
css 隐藏滚动条,但仍然能滚动
weixin_43940592的博客
08-09 408
css 隐藏滚动条，但仍然能滚动
css隐藏滚动条 但可以滚动
weixin_39531049的博客
05-26 223
css隐藏滚动条 但可以滚动 /*谷歌Safari浏览器*/ .todayNews::-webkit-scrollbar{ display:none; } /*IE*/ -ms-overflow-style:none;/*IE10+*/ /*火狐*/ scrollbar-width:none;/*Firefox*/ 前提是给有滚动条的div添加 overflow:auto
css隐藏滚动条但可以滚动
qq_26889291的博客
10-29 340
第一种方法添加伪类 .container { width: 100%; // height: 208px; display: -webkit-box; overflow-x: scroll; box-sizing: border-box; } .container::-webkit-scrollbar { display: none; } 第二种方法（思路） 设置父容器overflow hiden postion relativ
CSS实现隐藏滚动条并可以滚动内容效果(三种方式)
01-19
隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看看这三种方法。 方法1：计算滚动条...
css设置Overflow实现隐藏滚动条的同时又可以滚动
01-19
css设置Overflow实现隐藏滚动条的同时又可以滚动，具体代码如下所示： .scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; padding: 0 0.1rem...
css隐藏右侧滚动条 但是还能继续滚动
u010234868的专栏
05-16 736
子元素设置宽度比父级宽一点，把滚动条撑出去。父级设置overflow: hidden;
CSS实现隐藏滚动条但可以滚动
qq_54334713的博客
08-31 1716
本文提供了，如何实现隐藏滚动条但可以滚动的方法
最佳解决Css一隐藏滚动条
weixin_47121832的博客
01-31 423
最佳解决Css一隐藏滚动条。
web开发重点，css隐藏滚动条但能滚动
m0_60196616的博客
07-24 142
Netty 作为当前流行的 NIO 框架，在游戏、大数据通讯，云计算、物联网等领域都有广泛的应用，大家熟知的 Dubbo，底层用的就是 Netty。尤其在高性能 RPC 方面，Netty 更是必不可少。然而，想要将 Netty 真正掌握并精通难度却不小。一些学习者可能会遇到这些问题： 多线程编程、Socket 通信、TCP/IP 协议栈等知识掌握不扎实，学习过程比较吃力； 学习了不少理论知识，但真正跟具体项目结合在一起，解决实际问题时，又感觉比较棘手； 调用过程中遇到问题，不会定位，基本靠网上搜索，效率很
CSS 隐藏滚动条，同时可以滚动
Yuval的博客
10-30 544
如何隐藏滚动条且可以滚动 在开发中遇到一个问题，就是原始的滚动条有点难看，我想隐藏掉，如果使用overflow：hidden，会使滚动效果失效，超出部分无法显示。于是上网搜了搜，可以用两种思路解决这个问题 1.使用选择器隐藏滚动条 .mybox::-webkit-scrollbar { display: none; } 这样可以直接隐藏掉滚动条，让它隐藏不显示，同时也有滚动效果存在。 但...
CSS | 隐藏滚动条，但保持页面依旧能够滚动
k4nz
04-28 683
原文地址：CSS | 隐藏滚动条，但保持页面依旧能够滚动（永久地址，保存网址不迷路 ????） 问题描述 我们希望隐藏滚动条（但是，后来我们又选择显示滚动条，因为隐藏滚动条会降低页面的交互。什么意思呢？假如我们阅读到文章的底部，当我们希望快速回到最开始，对于多数用户来说，鼠标拖动滚动条是唯一的选择（很少会有人使用 SPACE、PageUp、PageDown 等等快捷键）。在某种程度上，虽然隐藏滚动条也许会提高页面的美观度，但是却牺牲交互性。所以最后选择显示滚动条，不过我们依旧会记录隐藏滚动条的方法。
实现CSS隐藏滚动条并可以滚动内容
06-02
要实现CSS隐藏滚动条并可以滚动内容，可以通过以下步骤： 1. 隐藏滚动条 可以使用CSS的伪元素选择器来隐藏滚动条，如下所示： ``` /* 隐藏纵向滚动条 */ ::-webkit-scrollbar { display: none; } ``` 其中 `::-webkit-scrollbar` 是一个伪元素选择器，表示对滚动条进行样式设置。 2. 允许内容滚动 由于隐藏了滚动条，需要通过其他方式来实现内容的滚动。可以使用CSS的 `overflow` 属性来控制容器的滚动行为，如下所示： ``` .container { overflow: auto; } ``` 其中 `overflow: auto` 表示当内容超出容器大小时，自动出现滚动条。由于滚动条被隐藏了，所以可以通过手动拖动内容来实现滚动。 综上所述，要实现CSS隐藏滚动条并可以滚动内容，可以将以上两个步骤结合起来，如下所示： ``` .container { overflow: auto; } /* 隐藏纵向滚动条 */ ::-webkit-scrollbar { display: none; } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值