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

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

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

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>
相关文章
|
8月前
|
前端开发
CSS 滚动条样式修改
CSS 滚动条样式修改
98 0
|
8月前
|
容器
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
mui.css 滚动条消失 导致超出部分无法显示 overflow属性
80 0
|
2月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
79 7
|
5月前
|
Web App开发 前端开发 iOS开发
如何使用CSS样式化滚动条
如何使用CSS样式化滚动条
40 0
|
5月前
|
JavaScript 前端开发
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
87 0
|
6月前
|
前端开发
css 平滑滚动 scroll-behavior: smooth
css 平滑滚动 scroll-behavior: smooth
86 1
|
6月前
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
227 0
|
7月前
|
前端开发
CSS实现将垂直滚动条放置在左侧方法
CSS实现将垂直滚动条放置在左侧方法
208 2
|
6月前
|
前端开发 C++
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
css实用技巧——锁定页面,禁止滚动 vs 解锁页面,恢复滚动
241 0
|
8月前
|
前端开发 JavaScript UED
【专栏:交互与用户体验篇】CSS 滚动效果与视差滚动
【4月更文挑战第30天】本文探讨了CSS滚动效果和视差滚动在提升网页用户体验中的作用。CSS滚动效果通过`transition`和`animation`属性实现元素动态变化,包括平滑滚动、元素跟随和滚动触发动画。视差滚动则利用不同元素滚动速度差异营造立体感,适用于长页面设计、故事讲述和创意展示。实现方法包括纯CSS和结合JavaScript。这些效果能增强吸引力、提升沉浸感并引导用户注意力,但需注意性能优化、适度使用和兼容性测试。案例分析展示了它们在实际项目中的应用和影响。
93 2