CSS 隐藏滚动条

这篇具有很好参考价值的文章主要介绍了CSS 隐藏滚动条。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

显示滚动条 overflow:auto

隐藏滚动条 overflow:hidden

但是直接使用 overflow:hidden 将导致元素内容不可滚动。时至今日,还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容,只能通过针对特定浏览器设置滚动条样式来实现。

Firefox浏览器

scrollbar-width: none; /* Firefox */

IE浏览器

-ms-overflow-style: none; /* IE 10+ */

Chrome和Safari浏览器

  .infiniteUl::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

并且:要隐藏滚动条的时候,要将overflow显示设置为auto或者scroll保证内容是可滚动的文章来源地址https://www.toymoban.com/news/detail-804779.html

demo

  .infiniteUl {
    width: 100%;
    height: calc(100vh - 120px);
    padding: 0;
    margin: 0;
    overflow: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }

  .infiniteUl::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

到了这里,关于CSS 隐藏滚动条的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 2022-11 CSS:flex布局父子宽度问题-小程序scrollView-div横向滚动字体超出隐藏-居中

    如上图第二行子元素宽度会跟随第一行宽度 解决方案: 对第二行设置: width: max-content; 使其宽度跟随自身内容 如上图,左侧宽高为112rpx,宽度不生效 解决方案: 对左侧图片设置宽高的同时, 设置最小宽高 效果如下: 例1:

    2024年02月09日
    浏览(44)
  • web前端html+css页面内容的六种隐藏方式

    一、使用透明度 语法:opacity:0 注意:元素消失,但是还会占据空间,只是视觉看不出来   二、使用display 语法:display:none 注意:元素消失,不会占据空间   三、scale 缩放 语法:transform:scale(0)    值大于1放大,小于1缩小 注意:元素消失,但是还会占据空间   四、使用vis

    2024年02月08日
    浏览(39)
  • 大前端04-固定组件在屏幕位置,随着滑轮滚动——使用css样式:position

    在遇到一些很长,很长的页面时候我们希望组件能够跟随用户操作,悬浮在固定位置,因此我们可以使用postition组件 CSS 的 position 属性用于设置元素在页面上的定位方式。它有 5 个可能的值: static 、 relative 、 absolute 、 fixed 和 sticky 。下面分别对这些值进行介绍,并给出一些

    2023年04月12日
    浏览(42)
  • 前端:横向滚动条,拖动进行左右滚动(含隐藏滚动条)

    /* 隐藏Webkit浏览器的滚动条 */ ul::-webkit-scrollbar {         display: none;  } 

    2024年02月10日
    浏览(34)
  • 前端如何实现隐藏滚动条,并且页面还可以滚动

    在前端中,可以通过 CSS 和一些简单的样式调整来实现隐藏滚动条,同时保持页面可滚动。这通常涉及到在容器内部创建滚动区域,并隐藏默认的滚动条样式。 下面是实现这一效果的基本步骤: 创建一个滚动容器元素,使其包裹需要滚动的内容。 通过 CSS 隐藏默认的滚动条样

    2024年02月02日
    浏览(42)
  • css面试题:css隐藏元素的方式

    特点:父元素设置该属性时,子元素同样会生效,但可以通过visibility:visible;修改子元素的显示效果; 特点:作用是从dom中移除节点,所以子元素也会被移除掉, 该方法通过改变元素透明度来实现隐藏,但需要注意父元素设置为opacity:0后,子元素会继承父元素该属性的效果,

    2024年02月13日
    浏览(27)
  • 【css】css自定义div的滚动条宽度

    需要通过对应浏览器的伪元素来修改: 点击这里查看:主流浏览器对应伪元素简介链接地址! 示例代码(针对google类webkit内核浏览器): css写法 less写法

    2024年02月07日
    浏览(23)
  • 【CSS文字滚动】CSS实现文字横向循环无缝滚动,鼠标移入暂停移出继续(附实测源码)

    CSS实现文字横向循环无缝滚动,鼠标移入暂停移出继续 【写在前面】故事的起源还得从客户现场的一个问题说起,前段时间总有客户现场反馈,你们的系统用着用着就会出现卡住的状态,导致页面无响应,一开始我以为是内存的问题,后面深入才发现是CPU消耗太多的问题,核

    2024年02月02日
    浏览(59)
  • 【CSS】元素显示与隐藏 ( display 隐藏对象 | visibility 隐藏对象 | overflow 隐藏对象 )

    在开发中 , 经常需要使用到 元素的显示 与 隐藏 , 默认状态下 , 按钮下面没有任何内容 ; 将鼠标移动到 红色按钮 后 , 显示一个对话框布局 ; 控制 元素的 显示 与 隐藏 的样式有如下三种 : display visibility overflow 为标签元素设置 可以 隐藏该元素 ; 如果想要 显示该对象 , 为该元

    2023年04月14日
    浏览(41)
  • css设置滚动条、并设置滚动条样式

    2024年02月15日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包