CSS隐藏滚动条的方法

CSS隐藏滚动条的方法方法一 纯 CSS div 样式隐藏 在需要滚动的元素外面再套一个 div 给最外面的 div 设置样式 overflow hidden 宽度比需要滚动的元素小 之后给需要滚动的元素设置样式 overflow x hidden overflow y scroll styletype text css margin 0 padding 0 box width styletype text

方法一:

纯CSS+div样式隐藏。

在需要滚动的元素外面再套一个div,给最外面的div设置样式overflow:hidden,宽度比需要滚动的元素小;

之后给需要滚动的元素设置样式overflow-x:hidden; overflow-y:scroll;

 
  
  • 1111
  • 1111
  • 1111
  • 1111
  • 1111
  • 1111
  • 1111

 

效果 :        前                                            后

CSS隐藏滚动条的方法CSS隐藏滚动条的方法

方法二

给需要滚动的元素添加伪选择器,::-webkit-scrollbar{width:0;},

将宽度设为0,滚动条就会隐藏。

 

PS:

可以设置滚动条样式,使其美观。

 

/*滚动条宽 长,滚动条整体部分,其中的属性有width,height,background,border等。*/

::-webkit-scrollbar{

         width: 7px;

    }

/*滚动条的滑轨背景颜色,可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/

    ::-webkit-scrollbar-track{

        background-color: #f5f5f5;

          -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.1);

       border-radius:5px;

}

/* 滑块颜色 */

    ::-webkit-scrollbar-thumb{

        background-color: rgba(0, 0, 0, 0.2);

        border-radius: 5px;

    }

/*滚动条两端的按钮。可以用display:none让其不显示,也可以添加背景图片,颜色改变显示效果。*/

    ::-webkit-scrollbar-button{

        background-color: #eee;

        display: none;

   }

/* 横向滚动条和纵向滚动条相交处尖角的颜色 */

    ::-webkit-scrollbar-corner{

        background-color: black;

    }

效果:

CSS隐藏滚动条的方法

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/202772.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午11:20
下一篇 2026年3月19日 下午11:20


相关推荐

  • 强化学习 Q学习原理及例子(离散)附matlab程序

    强化学习 Q学习原理及例子(离散)附matlab程序原文地址:http://mnemstudio.org/path-finding-q-learning-tutorial.htm这篇教程通过简单且易于理解的实例介绍了Q-学习的概念知识,例子描述了一个智能体通过非监督学习的方法对未知的环境进行学习。假设我们的楼层内共有5个房间,房间之间通过一道门相连,正如下图所示。我们将房间编号为房间0到房间4,楼层的外部可以被看作是一间大房间,编号为5。注

    2022年10月3日
    7
  • Grover算法思想

    Grover算法思想算法简介 Grover 算法是相较于经典数据库搜索算法 O n O n O n 复杂度实现二次加速的量子算法 即复杂度为 O N O sqrt N O N 算法本质 Grover 算法实质上是求解函数的逆问题的量子算法 即给定计算函数 y f1 x y f 1 x y f1 x 的黑盒 Orcale 算子 和已知 y0y 0y0 去求使函数满足 f1 x y0f 1 x y 0f1 x y0 的自变量 xxx 的值 算法步骤 该算法使用两个寄存器 第一个寄存器存储了 n 个量子比特 第二个寄存器是 Or

    2026年3月18日
    1
  • python识别文字位置_如何利用Python识别图片中的文字

    python识别文字位置_如何利用Python识别图片中的文字一、前言不知道大家有没有遇到过这样的问题,就是在某个软件或者某个网页里面有一篇文章,你非常喜欢,但是不能复制。或者像百度文档一样,只能复制一部分,这个时候我们就会选择截图保存。但是当我们想用到里面的文字时,还是要一个字一个字打出来。那么我们能不能直接识别图片中的文字呢?答案是肯定的。二、Tesseract文字识别是ORC的一部分内容,ORC的意思是光学字符识别,通俗讲就是文字识别。Tesserac…

    2022年5月18日
    62
  • Flume+Kafka整合案例实现

    Flume+Kafka整合案例实现 一、为什么要集成Flume和Kafka我们很多人在在使用Flume和kafka时,都会问一句为什么要将Flume和Kafka集成?那首先就应该明白业务需求,一般使用Flume+Kafka架构都是希望完成实时流式的日志处理,后面再连接上Flink/Storm/SparkStreaming等流式实时处理技术,从而完成日志实时解析的目标。第一、如果Flume直接对接实时计算框架,当数据采集速…

    2022年6月23日
    33
  • msfconsole是什么意思_msfconsole渗透手机

    msfconsole是什么意思_msfconsole渗透手机先模拟多层内网,摸清后渗透的使用,再从学校入手。内网渗透test网络拓扑以kali为攻击机,xp作为跳板主机,win7是内网主机xp主机是提供web,FTP等服务,已被kali机获取shellwin7正常不与外网访问,和DMZ区域处于同一网段环境搭建使用VMware的主机模式,构建虚拟局域网。查看Host-only模式详解虚拟网络编译器中添加两块网卡vm1,vm2。类型:主…

    2025年9月30日
    3
  • mysql executereader_C# 操作MySQL数据库, ExecuteReader()方法参数化执行T-SQL语句, 游标读取数据…

    mysql executereader_C# 操作MySQL数据库, ExecuteReader()方法参数化执行T-SQL语句, 游标读取数据…C#操作MySQL数据库需要引用”MySql.Data”,可通过两种方式获取。1、从NuGet下载”Install-PackageMySql.Data-Version6.8.7″推荐使用方式一,从NuGet上直接获取所需dll,方便快捷。C#操作MySQL数据库,ExecuteReader()方法参数化执行T-SQL语句,游标读取数据–ExecuteNonQuery()对连接执…

    2022年6月20日
    30

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号