css设置去掉滚动条依然可以滚动
在一些前端开发过程中，有些区块显示滚动条会显示得特别难看（例如：左侧菜单栏显示一个滚动调），但是又需要有滚动的功能，这个时候怎么办呢？可以通过使用css进行设置隐藏滚动条依然可以滚动。
思路：创建一个父<div>和一个子<div>,然后给父<div>设置一个高度和内容超出后隐藏的样式，同时给子<div>设置内容超出后显示滚动条、高度为100%、宽=100%+滚动条的宽
操作方法
- 01
打开前端开发工具，新建一个HTML代码页面
- 02
在html代码页面上创建一个父<div>和一个子<div>，同时给这两个div添加一个class分别为scroll-box、scroll
- 03
给子<div>添加内容，为了让滚动条可以实现，尽量多添加一些内容
- 04
为了保存html，查看一下添加内容内容是否成功（主要是为了与后面添加隐藏滚动条效果进行对比）
- 05
回到html代码页面。设置scroll-box、scroll类样式。给scroll-box设置一个高度和内容超出后隐藏的样式，给scroll设置内容超出后显示滚动条、高度为100%、宽=100%+滚动条的宽
- 06
保存html代码，然后使用浏览器打开，这个时候会发现滚动条已经不显示出来，但是页面内容依然可以滚动
相关推荐
-
电脑开机要按F1怎么设置去掉
电脑开机要按F1怎么设置去掉 其实有的时候这种情况是不允许发生的,比如很多公共查询电脑因为采用触摸控制,一般都没键盘,遇到这种情况一般就需要电脑高手去处理,下面笔者教大家如何去掉要按F1才能进系统,方 ...
-
Word怎么设置横竖滚动条
Microsoft Office Word作为一个强大的文档软件,提供了许多易于使用的文档创建工具,同时也提供了丰富的功能集供创建复杂的文档使用.平时用Microsoft Office Word特别多 ...
-
如何设置鼠标滑轮一次滚动一个屏幕
大部分用户在使用电脑时都会用到鼠标,有时候为了方便查看想要设置鼠标滑轮一次滚动一个屏幕,接下小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步点击左下角[开始菜单]图标.2. 第二步在弹出 ...
-
WPS怎么设置PDF文档滚轮滚动速度
WPS是一款功能强大的办公软件,支持多种类型的文档,有些用户想知道WPS怎么设置PDF文档滚轮滚动速度,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步用WPS打开电脑中的任意PD ...
-
如何设置VS Code按"Alt"滚动速度倍增
VS Code是现在十分常用的一款代码编辑软件,有些新用户不知道如何设置该软件按"Alt"滚动速度倍增,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图 ...
-
css设置背景图片居中；css背景图片自动居中
如何通过css设置一张背景图片自动水平垂直居中呢?可以通过css提供的background-position: center进行设置. 设置代码: .bg-img{ height: 100vh; wi ...
-
小米手机怎样设置diy壁纸随屏幕滚动？桌面滚动
其实壁纸设置很简单,只是有些操作不好找,下面简单讲一下 操作方法 01 首先选择一张适合作为壁纸的图片,直接单击以下 02 出来设置为壁纸,点击进入 03 在设置界面,再次双击屏幕,进入自定义效果模式 ...
-
Win10系统如何在注册表中设置去掉鼠标加速？
鼠标加速:鼠标指针在电脑屏幕上的移动速度与鼠标在鼠标垫上的物理移动速度的比值,随着鼠标物理移动速度的增加而增大.也就是说鼠标在鼠标垫上同样移动一厘米的距离,如果移动的速度越快,则电脑屏幕上鼠标指针移动 ...
-
css设置背景颜色的方法和设置背景颜色的透明度
css设置背景颜色的方法和设置背景颜色的透明度 操作方法 01 新建html文件 02 创建p标签和背景颜色用#色值表示 03 预览效果如图 04 创建p标签和背景颜色用英文设置背景颜色 05 预览效 ...
