前端切图:CSS实现隐藏滚动条同时又可以滚动

简介: 前端切图:CSS实现隐藏滚动条同时又可以滚动

CSS 实现隐藏滚动条同时又可以滚动

原始功能:

添加伪类之后的功能:

完整demo如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ::-webkit-scrollbar {display:none}
        </style>
    </head>
    <body>
        <div style=" width:200px;   height: 200px;  overflow-y: scroll;">
            11111</br>
            11111</br>
            11111</br>
            11111</br>
            11111</br>
            11111</br>
            11111</br>
            11111</br>
            11111</br>
            11111</br>
            11111</br>
        </div>
    </body>
</html>

缺点,不兼容IE

相关文章
|
12天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
22 4
|
1月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
157 1
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
33 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
27 2
前端基础(九)_CSS的三大特征
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
53 2
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
16 1
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
23 1
|
1月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
18 1
|
2月前
|
编解码 前端开发
前端基础(六)_CSS单位
本文介绍了CSS中常用的单位,包括像素(px)、相对长度单位(em、rem)、百分比(%)、视窗宽度(vw)和视窗高度(vh)。文章通过示例代码展示了这些单位在实际布局中的应用,解释了它们各自的特点和使用场景。例如,em和rem单位与字体大小相关,百分比单位与父元素的尺寸相关,而vw和vh单位则与浏览器视窗的宽度和高度相关。
25 1