通过css隐藏滚动条后在盒子底部多出来一部分找不到的padding区域

最新推荐文章于 2023-11-17 14:06:24 发布
原创 最新推荐文章于 2023-11-17 14:06:24 发布 · 585 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端 #html

本文介绍了两种在移动端项目中隐藏横向滑动tab栏滚动条的方法。第一种通过设置`::-webkit-scrollbar`的width为0，虽能隐藏滚动条但仍有占用空间的问题。第二种方案是将`display`设为`none`，彻底移除滚动条的同时保持正常滚动功能。这两种方案各有优劣，适用于不同的场景需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

移动端项目中有不少地方都用到了横向滑动的tab栏，就封装了插件，并做了样式美化，比如…隐藏滚动条：
原始样式

第一种方案

.tab-box::-webkit-scrollbar { width: 0 }
使用第一种方案后也可以隐藏滚动条，但是会出现图片中的问题，它其实是滚动条占用的地方，width虽然为0，但滚动条其实还存在
这一部分padding清除不掉

第二种方案

.tab-box::-webkit-scrollbar { display: none }
用这种方案，滚动条没有了，滚动也可以正常使用

前端css中盒子模型的各种属性
小蜗牛764号的博客
04-28 1957
本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定吧布局的内容放到弹性盒子模型中讲。部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 7159
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
html div虚点外边框,html – CSS：如何让滚动条出现在div的边框之外？
weixin_29229261的博客
06-04 1387
我正在为我的网站创建一些聊天框,我不能让垂直滚动条出现在边框之外.这就是我得到的：我想要的只是滚动条出现在右边的边框之外.它现在不是很漂亮,是吗？thix框的主要HTML代码(带有一条消息,用于打开聊天框)如下所示：PookyFan12:11test我的CSS代码如下所示：div#sb_messages_set{border: 2px solid black;border-radius: 10px...
巧用padding属性隐藏滚动条
JackieDYH的博客
04-21 726
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .wrap{ width: 200px; ...
css横向滚动_前端三贱客——每个人都会碰到的问题（html+css）
weixin_39692253的博客
11-21 464
常见浏览器兼容性问题与解决方案？参考答案(1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 碰到频率:100% 解决方案：CSS里 {margin:0;padding:0;} 备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符来设置各个标签的内外补...
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
07-21 790
解决方案就是在 grid 布局层加上下面一行代码，定义每一列的列宽（真的笑死），这里由于只有一列，直接可以写成下面的样子。今天在项目里面遇到了这个问题，相当炸裂，看了半天都没有看出什么问题，很是逆天，记录一下。然后切换按钮，数据就会变化，产生滚动条，table的宽度就会不断增加。"上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄"
overflow: auto； 产生的padding，隐藏问题
men852654的博客
12-27 1033
css注意问题
CSS 盒子模型 第三节
菜鸟心声：学的不仅是技术，更是梦想！
11-16 545
盒子模型 盒子模型 现代 Web 前端的布局设计简单说就是一堆盒子的排列与嵌套，掌握了盒子与它们的摆放控制，会发现再复杂的页面也不过如此。 盒子是一个概念，也可以说是容器，可以在里面放置网页中需要显示的内容，文档中每一个元素都会产生一个盒子，盒子拥有很多属性，比如 width、height、padding、border 和 margin 等。 案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8">
CSS高级技巧——鼠标样式，轮廓，文本域防拖拽，vertical-align 垂直对齐，文字溢出问题
流楚丶格念的博客
07-03 4876
CSS高级技巧 CSS用户界面样式 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽 鼠标样式cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 cursor : default 小白(就是普通是鼠标指针) | pointer 小手 | move 移动 | text 文本 鼠标放我身上查看效果哦： <ul> <li styl
css学习
weixin_68658847的博客
09-03 768
基础css学习
移动app使用overflow:scroll后底部会出现多一条东西
Chris__wang的博客
10-10 1312
在移动端app开发时，使用overflow:scroll;的时候会出现下面现象，解决办法 改成overflow-y:scroll即可
css内容达到最底部但滚动条没有滚动到底部
一枚不断学习的小码农一枚~
08-11 1459
看了好久一直以为是布局或者overflow的问题，最后发现是因为我给这个滚动条加了个高度，我也是傻狗一样的，滚动条高度是通过内容计算出来的，怎么能赋值呢，笑死了。也是犯了一个傻狗一样的错误 ，滚动条样式是直接复制的蓝湖的代码，有个高度，然后就出现了这样的bug。
CSS设置滚动条样式
lanyueliang2008的专栏
03-01 609
因为最近公司做的项目需要用到滚动条（项目在webkit平台下运行），所以研究下滚动条的CSS。 浏览器默认的滚动条样子太过屌丝了，得自己动手整整。记得IE浏览器有几个设置滚条的样式，不过比较鸡肋，只能设置颜色之类的，而且webkit下面也不支持。无意间看到网易邮箱的滚动条样子很好看，一开始以为是用div模拟的，结果一看，吼吼，正合我意，利用的CSS来设置的，而且是webkit浏览器的。
flex布局实现横向滚动踩坑
最新发布
weixin_47190898的博客
11-17 686
flex布局实现横向滚动踩坑，tabs标签栏滚动
el-table底部空白出现滚动条，el-table__body-wrapper高度小于el-table的高度
wusq的博客
12-30 3095
今天在研究keep-alive页面缓存的时候发现，切换到其他页面再切换回已打开的页面时，el-table表格出现底部还有空白，但是出现了滚动条的问题。查看控制台发现el-table__body-wrapper高度小于el-table的高度。如图： 解决： 在网上找了一些方法，发现doLayout()方法可以完美解决！ element2.0.5发布的该方法，可以用于重新计算表格布局 使用方法： 如果不是缓存页面，在mounted调用，如果是缓存页面，则在activated调用。 mo
设置padding后在滑动时覆盖padding区域
lixinxiaos的博客
11-27 1379
有没有遇到过这样的需求，在滑动到头的时候添加一个边距。在滑动时添加padding依然需要填充。 只需要在代码中添加如下代码即可（默认为true）： android:clipToPadding="false" 还有一个，就是如果子view大于parent的时候，是否要裁剪, clipchildren表示是否裁剪子View，当此属性的值为false时，子View的大小可以超过父View的大小。 an...
css 自定义滚动条样式
q1ngqingsky的博客
09-14 597
<div class="content-wrap"> <div> 内容XXXX </div> </div> <style> // content-wrap样式 .content-wrap { flex: 1; overflow-y: scroll; box-sizing: border-box; padding: 0 10px; margin: 10px 0; .
【css】css隐藏滚动条, 亲测好用
yurisa1994的博客
01-14 596
css隐藏滚动条
html隐藏后还占位置,然后通过overflow: hidden样式即可使得超出（溢出）固定的高宽内容隐藏同时也不占用被隐藏地方位置...
weixin_33656238的博客
05-30 1088
然后经过overflow: hidden样式即可使得超出(溢出)固定的高宽内容隐藏同时也不占用被隐藏中央地位，此案例可能进入css手册的overflow-y和css在线手册的overflow-x有具体的讲解对滚动条的设置隐藏或显示方法。div+css隐藏 内容方法 普通情况下，cssoverflow手册查看 3、利用overflow-y:hidden;和overflow-x:hidden控制滚动条...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值