css隐藏滚动条，让页面更美观

一时失言乱红尘 2023-06-14 10:44 13阅读 0赞

## 方法1：  ##

![2019111912204088.png][]

![20191119122137739.png][]

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式

`::-webkit-scrollbar` 仅仅在支持[WebKit][]的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用.

CSS滚动条选择器

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

*  `::-webkit-scrollbar` — 整个滚动条.
 *  `::-webkit-scrollbar-button` — 滚动条上的按钮 (上下箭头).
 *  `::-webkit-scrollbar-thumb` — 滚动条上的滚动滑块.
 *  `::-webkit-scrollbar-track` — 滚动条轨道.
 *  `::-webkit-scrollbar-track-piece` — 滚动条没有滑块的轨道部分.
 *  `::-webkit-scrollbar-corner` — 当同时有垂直滚动条和水平滚动条时交汇的部分.
 *  `::-webkit-resizer` — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮).

## 方法2 ##

在div外面再套一个div。这个div设置overflow:hidden。

而内容div设置 overflow-y: scroll;overflow-x: hidden;

然后再设置外层div的width小于内层div的width。

这个内层div其实是会出现滚动条的，所以不影响鼠标的滚动效果，而且我们看不到滚动条了。

<div style="height: 400px;width: 200px;overflow: hidden;">

<ul style="height: 100%;width: 220px;overflow-y: auto;overflow-x: hidden">

<li style="width: 200px">我是菜单1</li>

<li style="width: 200px">我是菜单2</li>

</ul>

</div>

[2019111912204088.png]: https://img-blog.csdnimg.cn/2019111912204088.png
[20191119122137739.png]: https://img-blog.csdnimg.cn/20191119122137739.png
[WebKit]: https://webkit.org/

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关前端 CSS - 如何隐藏右侧的滚动条 -关于出现过多的滚动条导致界面不美观

1、配置 HTML 标签，隐藏右侧的滚动条 CSS 配置：下面两个一起写进进去，适配 IE、火狐、谷歌浏览器 html {

不念不忘少年蓝@/ 2024年03月24日 23:41/ 0 赞/ 72 阅读

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

代码 body::-webkit-scrollbar { display: none; } 示例 css选择器::-webkit-

拼搏现实的明天。/ 2023年10月09日 14:21/ 0 赞/ 65 阅读

相关 css隐藏滚动条

> 有时候利用形成了滚动条后，我们要保留它的功能，且隐藏它的滚动条。 scrollbar-width: none;//火狐 -ms-overflow-

一时失言乱红尘/ 2023年07月03日 10:59/ 0 赞/ 50 阅读

相关 css隐藏滚动条，让页面更美观

方法1： ![2019111912204088.png][] ![20191119122137739.png][] ::-webkit-scrollbar CS

一时失言乱红尘/ 2023年06月14日 10:44/ 0 赞/ 14 阅读

相关 CSS实现隐藏滚动条并可以滚动内容

隐藏滚动条的同时还需要支持滚动，我们经常在前端开发中遇到这种情况，最容易想到的是加一个iscroll插件，但其实现在CSS也可以实现这个功能，我已经在很多地方使用了，下面一起看

比眉伴天荒/ 2022年12月19日 06:12/ 0 赞/ 194 阅读

相关 html不随页面滚动条滚动,css如何让元素不随滚动条滚动？

我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置，无论如何滚动滚动条，位置不变。那么如何让元素不随滚动条滚动？下面给大家介绍一下方法。有一定的参考价值，有需要的朋友可

偏执的太偏执、/ 2022年10月06日 00:58/ 0 赞/ 570 阅读

相关 css实现隐藏滚动条

css实现隐藏滚动条关键代码如下： //样式 .hide-bar{ width:100px; height:100px;

拼搏现实的明天。/ 2022年05月15日 04:12/ 0 赞/ 332 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

1. 1. 主要代码：　　ul ::-webkit-scrollbar\{

Bertha 。/ 2021年10月23日 07:13/ 0 赞/ 515 阅读

相关 CSS 实现隐藏滚动条滚动

需求：当页面元素溢出的时候会产生滚动条，这个时候需要页面样式优化：CSS实现隐藏滚动条但是可以滚动。 css伪类元素控制 body::-webkit-s

╰半夏微凉°/ 2021年09月19日 01:36/ 0 赞/ 534 阅读

相关隐藏滚动条css3实现滚动同时隐藏滚动条

项目场景需求要在局部实现滚动，但是滚动出现了滚动条，一瞬间感觉整个页面都不好了，经过努力css成功实现滚动同时隐藏滚动条，废话不多说，直接上代码核心代码： :

╰+哭是因爲堅強的太久メ/ 2021年07月04日 21:32/ 0 赞/ 712 阅读