css隐藏滚动条但仍然可以滚动

最新推荐文章于 2025-03-18 11:13:08 发布

花烁

最新推荐文章于 2025-03-18 11:13:08 发布

阅读量508

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/nana_4/article/details/126228223

版权

.intro{
  text-align: justify;
  padding: 8px 10px;
  border-radius: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  background-color: #EFF8FF;
}
.intro::-webkit-scrollbar,
.intro::-webkit-scrollbar {
  display: none;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

花烁

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

css隐藏移动端滚动条并且ios上平滑滚动的方法

09-22

但这时可能会出现滚动条并没有完全隐藏的问题，因为`::-webkit-scrollbar`仅适用于隐藏滚动条，而不是物理地移除滚动条元素。解决方法是使用`padding-bottom`技巧来把滚动条从可视区域内挤出。这个技巧的原理是...

css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

09-22

接下来，我们讨论如何通过CSS隐藏或去掉滚动条。这可以通过设置`overflow`属性来实现： - `overflow: auto;` - 内容超出容器时自动显示滚动条。 - `overflow: scroll;` - 总是显示滚动条，即使内容未超出容器。 - `...

参与评论您还未登录，请先登录后发表或查看评论

css设置Overflow实现隐藏滚动条的同时又可以滚动

01-19

css设置Overflow实现隐藏滚动条的同时又可以滚动，具体代码如下所示： .scroll-list ul{ white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-x: auto; overflow-y: hidden; padding: 0 0.1rem; margin-bottom: -.2rem; overflow: -moz-scrollbars-none; overflow: -moz-scrollbars-none; } .scroll-l

CSS 实现隐藏滚动条同时又可以滚动（转）

12-21

2298

CSS 实现隐藏滚动条同时又可以滚动移动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？使用overflow:hidden隐藏滚动条，但存在的问题是：页面或元素失去了滚动的特性。由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar。关于这个选择器的介绍可以参...

前端隐藏滚动条的多种方法及实现技巧

最新发布

m0_58537749的博客

03-18

959

CSS 是最简单直接的方式，适合全局或静态场景；JavaScript 则提供了动态控制的能力；而 Vue 框架结合第三方库可以实现更复杂的滚动条样式和行为。在实际开发中，可以根据项目需求和个人喜好选择最适合的方法来隐藏滚动条。

CSS 实现隐藏滚动条同时又可以滚动

qupeng666的博客

06-12

1045

应用如下 CSS 可以隐藏滚动条： .element::-webkit-scrollbar {display:none} 如果要兼容 PC 其他浏览器（IE、Firefox 等），国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。 div class="outer-c

css如何实现滚动条隐藏但鼠标仍然可以滚动

menghuannvxia的专栏

06-23

538

css如何实现滚动条隐藏但鼠标仍然可以滚动

CSS中使用overflow时想要隐藏滚动条，仍然可以滚动

CssHero的博客

12-20

1444

使用overflow时，想要隐藏滚动条，但还想要可以继续滚动

纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）

01-19

移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; } PC 端 PC 端对兼容性的要求相对来...

CSS实现隐藏滚动条并可以滚动内容效果(三种方式)

01-19

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

CSS怎么隐藏滚动条(三种方法)

11-21

xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候，默认会水平和垂直滚动条会一起出现，这是ie6的一个bug，在firefox上是正常的，出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有...

css 隐藏滚动条,但仍然能滚动

weixin_43940592的博客

08-09

443

css 隐藏滚动条，但仍然能滚动

css隐藏滚动条但是依然可以滚动

笑死我了我笑死了的博客

06-05

454

保证是有效的，支持这几个就已经够用了，别的浏览器无视就好还有微软的IE已经停更了，现在最新的Edge浏览器已经变更为谷歌内核微软官方也鼓励用户早点升级成edge /* chrome 和Safari去除滚动条 */ element ::-webkit-scrollbar { display: none; } /* IE去除滚动条IE10+ */ -ms-overflow-style: none; /* 火狐 */ scrollbar-width: none; ...

CSS | 隐藏滚动条，但保持页面依旧能够滚动

k4nz

04-28

720

原文地址：CSS | 隐藏滚动条，但保持页面依旧能够滚动（永久地址，保存网址不迷路 ????）问题描述我们希望隐藏滚动条（但是，后来我们又选择显示滚动条，因为隐藏滚动条会降低页面的交互。什么意思呢？假如我们阅读到文章的底部，当我们希望快速回到最开始，对于多数用户来说，鼠标拖动滚动条是唯一的选择（很少会有人使用 SPACE、PageUp、PageDown 等等快捷键）。在某种程度上，虽然隐藏滚动条也许会提高页面的美观度，但是却牺牲交互性。所以最后选择显示滚动条，不过我们依旧会记录隐藏滚动条的方法。

CSS隐藏滚动条，保留滚动功能

LMX的博客

08-18

3489

CSS隐藏滚动条，保留滚动功能原理：设置父级为溢出隐藏，而子级不进行溢出隐藏设置同时改变子级的宽度使进度条溢出到父级外面。设置父级overflow:hidden;是为了使父级溢出隐藏。再设置子级的y轴方向可以滚动，然后设置子级的宽度使得滚动条溢出父级元素，达到隐藏滚动条的效果（实际上是滚动条溢出）示例：  <div style="height: 500px; border:solid 2px red; overflo

css隐藏滚动条但可以滚动

qq_26889291的博客

10-29

391

第一种方法添加伪类 .container { width: 100%; // height: 208px; display: -webkit-box; overflow-x: scroll; box-sizing: border-box; } .container::-webkit-scrollbar { display: none; } 第二种方法（思路）设置父容器overflow hiden postion relativ

移动端开发（一）：解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题

top_liqian的博客

10-25

6984

解决body体中设置overflow:hidden;屏幕仍然会出现滚动条问题解决方法为：在body体内设置固定定位，top为0，left为0即可，同时设置html标签overflow:hidden; body{ position: fixed; top: 0; left: 0; width: 100%; heig

CSS实现隐藏滚动条但可以滚动

qq_54334713的博客

08-31

1823

本文提供了，如何实现隐藏滚动条但可以滚动的方法

css隐藏右侧滚动条 但是还能继续滚动

u010234868的专栏

05-16

791

子元素设置宽度比父级宽一点，把滚动条撑出去。父级设置overflow: hidden;

css隐藏滚动条可以滚动

12-11

CSS 隐藏滚动条通常是通过设置`overflow`属性来实现的，有几种不同的方法可以让你的元素看起来像没有滚动条但实际上仍然可以滚动内容： 1. **使用 `overflow-x` 和 `overflow-y` 属性**： ```css .scrollable { overflow-x: hidden; /* 隐藏水平滚动条 */ overflow-y: auto; /* 显示垂直滚动条 */ } ``` 这样只有垂直方向会显示滚动条，而水平方向的滚动条会被隐藏。 2. **仅隐藏某个方向的滚动条**： - 如果只想隐藏某一边的滚动条，比如只隐藏水平滚动条： ```css .scrollable { overflow-x: none; } ``` - 或者只隐藏垂直滚动条： ```css .scrollable { overflow-y: none; } ``` 3. **使用伪元素`:滚动条`**：使用 `::-webkit-scrollbar` (适用于Webkit内核浏览器如Chrome、Safari) 或 `::-webkit-scrollbar { display: none; /* 隐藏滚动条 */ } /* 或针对IE/Edge */ ::-ms-scrollbar { width: 0; /* 或设置透明度为0 */ } ``` 注意这种方法可能会导致一些视觉上的问题，因为滚动条默认是有帮助用户交互的设计元素。