元素去掉滚动条,保留滚动功能,隐藏元素滚动条

已于 2023-08-14 00:14:32 修改
阅读量416 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-08-08 11:00:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64530670/article/details/132162424
版权
(一)去掉滚动条,保留滚动功能
 .有滚动条的块的类名::-webkit-scrollbar {
      display: none;
    }

(二)或者把有滚动条的元素用另一个元素包起来,并设置overflow:hidden,让滚动条的位置超出外层元素,就隐藏了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u1GOiRXu-1691463401672)(%E5%8E%BB%E6%8E%89%E6%BB%9A%E5%8A%A8%E6%9D%A1,%E4%BF%9D%E7%95%99%E6%BB%9A%E5%8A%A8%E5%8A%9F%E8%83%BD.images/image-20230808105548324.png)]

如图,滚动条在红色框上,但是,给黑色框设置了overflow:hidden,红色框的滚动条刚好超出了黑色框,所以就隐藏了滚动条.

前端李十三
关注
HTML 隐藏滚动条和去除滚动条的方法
09-28
有时为了保持网站界面的一致性和美观性，开发者会选择隐藏或完全去除滚动条。接下来，我们将详细探讨如何隐藏滚动条和去除滚动条。 首先，隐藏滚动条的常见方法是通过CSS样式来实现。具体操作如下： 1. 通过html...
invisible-scrollbar:隐藏滚动条但保留其功能
05-22
在网页设计中，有时我们希望页面看起来更简洁，去掉那些不必要元素，比如滚动条。但是，滚动条作为用户导航长内容的重要工具，完全移除可能会导致用户体验下降。在这种情况下，“隐藏滚动条但保留其功能”就是一个很...
CSS隐藏元素滚动条
jyn15159的博客
04-30 393
针对特定浏览器设置滚动条样式来实现 Firefox浏览器 对于Firefox，可以将滚动条宽度设置为none： scrollbar-width: none; /* Firefox */ IE浏览器 对于IE，需要使用-ms-prefix属性定义滚动条样式： -ms-overflow-style: none; /* IE 10+ */ Chrome和Safari浏览器 对于Chrome和Safari浏览器，必须使用CSS滚动条选择器，然后使用display：none隐藏它： ::-webkit-scrol
css 隐藏滚动条
搬砖小鱼，请多指教呦
07-21 554
在需要隐藏的元素上面添加上面代码即可隐藏滚动条。
如何隐藏一个元素的滚动条
最新发布
ggq53219的博客
05-14 540
考虑用户体验和可访问性
移除元素所有事件监听_理解DOM事件与事件委托
weixin_39654058的博客
01-13 187
DOM 事件模型及DOM 事件机制前情提要：<div class='爷爷'> <div class='爸爸'> <div class='儿子'> 文字 </div> </div> </div> 给三个div分别添加事件监听fnYe/fnBa/fnEr提问1：...
隐藏页面中滚动条，与如何自定义滚动条显示效果
不染-9732
01-20 370
页面中自定义滚动条样式 css定义部分 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ .tree-line::-webkit-scrollbar { width: 8px; border-radius: 4px; background: #263d5d; } // /*定义滑块 内阴影+圆角*/ .tree-line::-webkit-scrollbar-thumb { height: 5px;
textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法
12-13
要去掉`textarea`的滚动条，可以分别使用`overflow-x`和`overflow-y`属性来控制横向和纵向的滚动条。例如，如果你想要隐藏`textarea`的横向滚动条，可以这样设置： ```html ;"> ``` 同样，如果想隐藏纵向滚动条，...
JS去除iframe滚动条的方法
10-24
最后，给定文件还提到了一点重要的内容，即在实际应用去除滚动条功能时，可能需要根据具体情况调整代码，以确保在所有主流浏览器中都能正常工作。开发者可以采取多种措施，比如使用浏览器前缀、多浏览器测试等方法，...
CSS 实现隐藏滚动条同时又可以滚动
qupeng666的博客
06-12 904
应用如下 CSS 可以隐藏滚动条： .element::-webkit-scrollbar {display:none} 如果要兼容 PC 其他浏览器（IE、Firefox 等），国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。 div class="outer-c
html去除页面的滑动条
WzhCsdnd的博客
03-11 7853
html去除页面的滑动条的几种方法
css如何去除页面滚动条
tianxianghuiwei的博客
09-27 1387
提示下，如果碰到没有滚动条而鼠标又没有滚轮的朋友，该怎么浏览网页呢？呵呵，大家可以用键盘上面的方向键上方的PageUp和PageDown来上下翻页，也可以用空格往下拉网页和Shift+空格往上拉网页，还有一个方法就是用上下方向键来拉动，另外还有按Home键回到网页顶部，End键到。就可以了，这样滚动条就不会显示出来了。呵呵，既然我说了不影响浏览，那当然是有方法的，浏览的方法就是用鼠标的滚轮，虽然滚动条没了，可是鼠标滚轮还是能够让网页上下滚动的。达网页底部，呵呵，是不是方法很多呢？在body{}中加入。
css 页面去除滚动条方法
qq_39111074的博客
04-17 9916
css 页面去除滚动条方法
前端产生滚动条去掉滚动条
m0_52244931的博客
06-10 1212
前端产生滚动条去掉滚动条 代码如下，.sTable是自己起的class类名 .sTable::-webkit-scrollbar{ display: none; }
关于滚动条
10-21 293
/*定义滚动条轨道*/ #style-3::-webkit-scrollbar-track { /*-webkit-box-shadow: ;*/ } /*定义滚动条高宽及背景*/ #style-3::-webkit-scrollbar { width: ; } /*定义滑块*/ #style-3::-webkit-scrollbar-thumb { ...
去除默认滚动条 自己调整样式
weixin_69811594的博客
02-16 470
去除默认滚动条 自己调整样式
前端开发如何隐藏滚动条
Damon99999的博客
04-19 1453
本文仅提供思路 1：设置两个div。比如你想隐藏右侧的滚动条，你可以将这个滚动区域在加入另一个div，这个div设置overflow: hidden，同时将这个div的宽度设置比内容div宽度小一些，你就可以看到滚动条被遮挡了 2：如果觉得第一种方式麻烦可以将内容div进行内缩进比如margin-right： -20px也是可以达到效果的 ...
取消页面元素滚动条并使其回到顶部
Mr.小灰狼_随笔
08-11 409
取消页面元素滚动条并使其回到顶部 需求背景 ： 首页页面在用户的放大缩小时 ， 页面内容可能会展示不开 ， 所以此时就需要根据用户放大缩小了多少倍 ， 来使其页面滚动条展示与否 ， 并且用户调整到正常比例时 ， 让其滚动条先归零 ， 回归到原始位置后再取消滚动条...
纯css，div隐藏滚动条，保留鼠标滚动效果。
热门推荐
liusaint1992的专栏
04-28 8万+
隐藏div滚动条，但是保留滚动功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值