div实现可以滚动但不显示滚动条(纯CSS实现)

简介: div实现可以滚动但不显示滚动条(纯CSS实现)

想要的效果


想实现滚动效果但是又不想显示滚动条,如下面两个图所示:

从下面两个图可以看出,实现了滚动效果,动图弄着有点费劲,就委屈各位通过两个图片的变化看效果吧

1.png20210507101657423.png


实现效果的核心代码


首先有3个div
第1个,固定大小是宽:200,高:200(单位为px,下同)
第2个,不固定大小,其大小要用第3个div把个撑开,但是这个div必需要有滚动条
第3个,固定大小与第1个div保持一致宽:200,高:200

<div style="width: 200px;height: 200px; position: relative;overflow: hidden;">
    <div id="abc" style="overflow-x: hidden;overflow-y: scroll;position: absolute;">
        <div style="width: 200px;height: 200px;">
        <br>
        </div>
    </div>
 </div>

参考


参考链接:https://www.cnblogs.com/dinghaoran/p/11322455.html

相关文章
|
2月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
82 7
|
2月前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
29 1
|
4月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
5月前
|
Web App开发 前端开发 iOS开发
如何使用CSS样式化滚动条
如何使用CSS样式化滚动条
40 0
|
5月前
|
JavaScript 前端开发
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
87 0
|
6月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
290 3
|
6月前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
425 1
|
6月前
|
前端开发
css 平滑滚动 scroll-behavior: smooth
css 平滑滚动 scroll-behavior: smooth
86 1
|
6月前
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
229 0
|
6月前
|
前端开发
css div填满剩余高度
css div填满剩余高度
114 0