css怎么隐藏滚动条

2023-11-07

法一:
①使用伪类隐藏滚动条(仅限Chrome与Safari)
②scrollbar-width: none;(仅限firefox)
③-ms-overflow-style: none;(仅限IE 10+)

/* 隐藏滚动条 */
.element {
   width: 100%;
   height: 72px;
   box-sizing: border-box;
   padding-top: 16px;
   overflow-x: scroll; /* 设置溢出滚动 */
   white-space: nowrap;
   overflow-y: hidden;
   /* 隐藏滚动条 */
   scrollbar-width: none; /* firefox */
   -ms-overflow-style: none; /* IE 10+ */
}
.element::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}

法二:
可滚动的容器外层再签套一个父盒子,父盒子设置overflow:hidde,再配合position,变相隐藏滚动条

 <div class="outer-container">
     <div class="inner-container">
     </div>
 </div>

.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; 
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}
 /* for Chrome */
.inner-container::-webkit-scrollbar {
    display: none;
}
 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css怎么隐藏滚动条 的相关文章

  • 迭代 div 内的输入

    我试图通过 jQuery 迭代放置在特定 div 上的所有输入 但没有响应 我无法使用警报查看输入的值 我究竟做错了什么
  • 在 React Native 中删除输入文本中的下划线

    我无法删除输入文本中的下划线 我想应该是 underlineColorAndroid transparent 查看相关问题https github com facebook react native issues 10108 https g
  • Flexbox 中的图像高度在 IE 中不起作用

    我有一个 Flex 行 其中包含 5 个 Flex 单元格 其中包含一个应该在中间对齐的图像 它在 Chrome 和 Firefox 中完美运行 但在 IE 中却不行 它没有得到好的比例 换句话说 height auto当图像位于 Flex
  • 禁用 Firefox 的自动填充

    是否可以禁用 Firefox自动填充功能而不禁用自动完成 我知道我可以这样做 autocomplete off 但我不想禁用自动完成 只是禁用自动填充 Firefox 正在填充一些本应为空的隐藏字段 这主要是用户刷新页面时出现的问题 表单字
  • 表格内的垂直滚动条不显示:块

    有没有办法在里面有一个垂直滚动条 tbody 一张桌子并有display table放在桌子上但不使用display block桌子内的任何地方 对于滚动条部分 将其添加到要滚动的标签中 style overflow y scroll tb
  • border-box 不适用于内联块元素?

    我有一个清单inline block元素 我想为您将鼠标悬停在其上的元素添加边框 但是 请注意边框如何偏移元素 即使我使用box sizing border box并明确定义元素的宽度和高度 我说明了以下行为 box sizing bord
  • 禁用选择标签内的一个选项值在 IE6Ha 中不起作用[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我有一个包含 4 个值 a b c d 的选择框 我只想禁用下拉列表中的 c 我使用了禁用属性 它在所有浏览器中都有效 但在 IE6
  • onclick 调用 hide-div 函数不起作用

    我一直在与这段简单的代码作斗争 我正在尝试使用
  • 如何以 JavaScript 编程方式获取旋转的 svg 文本边界

    我正在动态渲染 SVG 图像并创建旋转文本 如果旋转的文本与其他文本重叠 我需要删除该文本 但我无法测量旋转的文本来创建边界并检查下一个标签文本区域 我创建了 3 个 SVG 元素来解释 SVG 1 显示重叠的文本 SVG 2 显示重叠的旋
  • CSS - 制作“步进”文本的好方法?

    有没有一种好的方法可以实现以下目标 而无需任何额外的标记 不过使用 JavaScript 就很好了 任何想法 Thanks Edit 我的标记将是这样的 div style width 400px p Text text text Text
  • 在 Javascript 中获取文本框的值

    我有这个html代码 table border cellpadding 3 cellspacing 0 tbody tr td Song td td td tr tbody table
  • HTML:您可以隐藏/忽略浏览器查找中的文本元素 (CTRL+F)

    我有一个具有相当复杂的 UI 的 Web 应用程序 并且屏幕的一部分保留用于内容 如果可能的话 我想这样做 以便当用户使用浏览器的内置文本搜索 CTRL F 时 UI 中的任何文本都将被忽略 并且仅搜索实际内容 这可行吗 CSS 和 Jav
  • 无法读取未定义错误的属性“匹配”

    我试图在 React JS 前端显示一些文本来代替个人资料图像 当它不可用时 基本上 我将当前客户名称传递给一个函数 该函数提取名称中所有单词的第一个字符 我能够仅显示名称 但是当我执行函数调用时 出现 无法读取未定义的属性 匹配 错误 并
  • CSS 列数导致项目拆分列

    尝试不使用 jQuery 脚本来实现砖石效果 因此寻找 CSS 替代方案 我正在尝试使用列计数 这似乎有效 但不符合预期 因此 列就在那里 但有时容器中的项目会被拆分为多个列 正如您应该在此示例中看到的那样 http jsfiddle ne
  • 带有 viewbags 的 MVC 数据集

    如何将数据集放入视图袋中并在视图中显示结果 我有一个来自模型的数据集 并将其写入视图包 我想使用 foreach 循环从视图中的视图包中获取数据行 我已经有一个变量进入视图 所以我无法正常传递数据集 每页我还会有许多其他数据集 所以我认为
  • Asp 按钮悬停和 CSS

    我有一个 asp 按钮控件 我在上面应用了一些样式 我希望鼠标悬停在该按钮上时 按钮的颜色应该发生变化或类似的情况 但我不明白为什么在 CSS 中按钮悬停功能不起作用 请帮忙 另请让我知道按钮悬停的最佳效果是什么
  • 为什么媒体查询中的 CSS 旋转不会旋转回来

    我有一个 SVG 其中一些元素根据媒体查询进行旋转 如下所示 media max width 480px rect transform rotate 10deg 该元素旋转得很好 但 至少在 Chrome 中 它拒绝返回 这是为什么 其他指
  • html 文件上传的默认文件夹和文件名

    我正在使用 jQuery Ajax 插件将图像文件从本地计算机上传到网络服务器 该网页呈现一个标记为Upload Image File 用户按下按钮并从浏览器显示的弹出目录列表中选择要上传的文件 服务器上的 PHP 存储图像文件 一切正常
  • 单击 div 中的图像时如何翻转该 Div?

    好吧 我对编写 Javascript 知之甚少 我可以对其进行一些编辑 并且涉足了 CSS3 动画 我将向您展示我正在努力实现的目标 然后在下面进行解释 网站布局将是这样的 https i stack imgur com RMb4R jpg
  • 如何将 Bootstrap 3 轮播标题移动到图像下方?

    我有这个 html 使用 bootstrap 3 显示幻灯片图像 div class col sm 8 div class carousel slide ol class carousel indicators li class activ

随机推荐

  • 两个数字相加的代码

    内容 include
  • mac os x 使用外接摄像头

    参考 http bbs feng com read htm tid 2745586 html http www jb51 net os MAC 470090 html 1 打开macbook 自带程序Photo Booth 2 在左上工具条
  • Python3 CGI 编程

    什么是 CGI CGI 目前由 NCSA 维护 NCSA 定义 CGI 如下 CGI Common Gateway Interface 通用网关接口 它是一段程序 运行在服务器上如 HTTP服务器 提供同客户端 HTML 页面的接口 网页浏
  • Mysql子查询和联合(UNION)查询详解

    原文 http www 111cn net database mysql 47438 htm 在mysql中UNION查询是可以联合多个表 union只是mysql中联合查询的一个小点了 下面我来给大家介绍各种mysql中联合查询的语句 大
  • PS对白色过曝的区域建立选区,可先调整图像亮度对比度

    PS对白色过曝的区域建立选区 因为白色过薄 看不清边缘 解决方案 调整亮度和对比度 1 再选择边缘 就很方便了
  • 全新iPhone首发,结果“华为发布会”冲上热搜第一

    就离谱 苹果发iPhone 15 结果发着发着 华为发布会 冲上了热搜第一 哪怕是iPhone 15全系告别11年闪电接口改用USB C 经典静音键从Pro系列消失 这些库克 违背祖宗的决定 都没抢到更多热度 网友们第一时间倒是吐槽吐出了花
  • 提示“Web打印服务CLodop未安装启动”的各种原因和解决方法

    旧版提示 CLodop云打印服务 localhost本地 未安装启动 新版提示 Web打印服务CLodop未安装启动 点击这里下载执行安装 若此前已安装过 可点这里直接再次启动 成功后请刷新本页面 可能原因及现象及解决方法 原因1 没安装
  • 解决Moment格式化时间出现时区差的问题

    Moment格式化时间默认格式为当地时区的时间 如果格式化的结果与当地时间有差值 一般原因是 要格式化的时间带有时间标志 如 UTC GMT等 经过Moment格式化后 会变成时间标志所表示的时区的时间 此时 只需要改变时间偏移量即可 使用
  • iOS音视频—FFmepg应用-Android平台使用(NDK项目)

    iOS音视频 目录 新建NDK项目 1 编译 so动态库 2 新建在Android平台下的NDK项目 Android本身不支持C C 开发 NDK底层开发 需要我们进行配置 NDK 在Android平台下Google提供的支持C C 开发的
  • 测试学Python白话版(一)

    前言 测试人员转开发 Python是一个特别好的入门级编程语言 Python学起来相对容易 能做的事情也比较多 有了一定的基础之后 再学习其他语言也更加轻松 网上关于Python的教程很对 如果有时间完全可以自学 因为好多测试人员的基础较差
  • CCF-CSP 26次 第三题【角色授权】

    计算机软件能力认证考试系统 20分 include
  • 深度学习6-高级强化学习库

    高级强化学习库 使用高级库的动机 不要从头开始重新实现一切 PTAN库以及最重要的部分 将通过代码示例进行说明 针对CartPole上的DQN 使用PTAN库来实现 可以考虑的其他RL库 为什么使用强化学习库 RL十分灵活 并且很多现实生活
  • 如何实现侧边栏高亮?

    大家好 我是IT修真院深圳分院第九期的学员徐炜 一枚正直纯洁善良的前端程序员 今天给大家带来的是如何实现侧边栏高亮 一 背景介绍 侧边栏高亮是指选择侧边栏菜单时有一个样式效果 当刷新页面的时候 这个效果还在 侧边栏高亮有很多种实现方法 根据
  • 有趣的数据结构算法7——双向循环链表的实例应用

    有趣的数据结构算法7 双向循环链表的实例应用 问题复述 解题思路 实现代码 GITHUB下载连接 问题复述 要求实现用户输入一个数字改变26个字母的排列顺序 正常情况下26个字母的排列顺序是A B C D E F G H I J K L M
  • python随机生成十个数

    import random a range 3 100 2 b random sample a 10 print b x 0 for i in b x 1 print 整数的个数为 0f format x
  • 怎么查看文件的MD5码

    windows下查看MD5 步骤一 首先使用WIN R快捷键 进入CMD命令行模式 步骤二 然后在cmd命令行中切换到指定目录 或者直接使用绝对路径 certutil hashfile D file txt MD5 certutil has
  • Spring集成XxlJob核心初始化类,对应版本:2.4.1-SNAPSHOT

    XxlJobSpringExecutor 继承了XxlJobExecutor父类 实现了ApplicationContextAware SmartInitializingSingleton DisposableBean接口 在Spring容
  • Python如何开发桌面应用程序?Python基础教程,第十三讲,图形界面

    2019独角兽企业重金招聘Python工程师标准 gt gt gt 当使用桌面应用程序的时候 有没有那么一瞬间 想学习一下桌面应用程序开发 行业内专业的桌面应用程序开发一般是C C 来做 Java开发的也有 但是比较少 本节课会介绍Pyth
  • Android NDK Win10安装及环境变量配置(图文详细教程)

    首先需要安装 Android Studio Android Studio 的安装比较简单 这里不赘述 如果没有安装请先自行安装 1 使用Andorid Studio 进行安装 在顶部菜单中 选择 Tools gt SDK Manager 如
  • css怎么隐藏滚动条

    法一 使用伪类隐藏滚动条 仅限Chrome与Safari scrollbar width none 仅限firefox ms overflow style none 仅限IE 10 隐藏滚动条 element width 100 heigh