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

最新推荐文章于 2023-07-21 15:12:04 发布
最新推荐文章于 2023-07-21 15:12:04 发布
阅读量383 收藏 1
点赞数
分类专栏： css 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QAQLP/article/details/128419217
版权

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

第一种方案

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

第二种方案

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

QAQLP
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css 自定义滚动条样式
q1ngqingsky的博客
09-14 504
<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; .
html div虚点外边框,html – CSS：如何让滚动条出现在div的边框之外？
weixin_29229261的博客
06-04 1284
我正在为我的网站创建一些聊天框,我不能让垂直滚动条出现在边框之外.这就是我得到的：我想要的只是滚动条出现在右边的边框之外.它现在不是很漂亮,是吗？thix框的主要HTML代码(带有一条消息,用于打开聊天框)如下所示：PookyFan12:11test我的CSS代码如下所示：div#sb_messages_set{border: 2px solid black;border-radius: 10px...
巧用padding属性隐藏滚动条
JackieDYH的博客
04-21 654
<!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 402
常见浏览器兼容性问题与解决方案？参考答案(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 599
解决方案就是在 grid 布局层加上下面一行代码，定义每一列的列宽（真的笑死），这里由于只有一列，直接可以写成下面的样子。今天在项目里面遇到了这个问题，相当炸裂，看了半天都没有看出什么问题，很是逆天，记录一下。然后切换按钮，数据就会变化，产生滚动条，table的宽度就会不断增加。"上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄""上海市普陀区金沙江路 1518 弄"
css将div层固定显示在页面底部不随滚动条滚动
12-13
复制代码代码如下:#totop{position:fixed;right:10px;bottom:10px;width:100px;height:100px;}
css隐藏移动端滚动条并且ios上平滑滚动的方法
09-22
主要介绍了css隐藏移动端滚动条并且ios上平滑滚动的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
纯CSS实现隐藏滚动条但仍具有滚动的效果（移动端和pc端）
01-19
移动端页面只要兼容 Chrome 和 Safari 就够了，所以可以使用自定义滚动条的伪类选择器 ::-webkit-scrollbar 来隐藏滚动条。 .container::-webkit-scrollbar { display: none; } PC 端 PC 端对兼容性的要求相对来...
vue进入页面时滚动条始终在底部代码实例
10-17
`scrollTop`属性设置为`scrollHeight`，这会使滚动条滚动到底部。 对于滚动条的样式，我们可以使用CSS来自定义。例如： ```css ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track-...
CSS控制DIV永远固定在页面底部不随滚动而滚动
09-25
控制DIV永远固定在页面底部的方法有很多，基本上都是通过css或js来实现的，本节也实现了一个这样的效果，大家可以学习下
overflow: auto； 产生的padding，隐藏问题
men852654的博客
12-27 801
css注意问题
el-table底部空白出现滚动条，el-table__body-wrapper高度小于el-table的高度
wusq的博客
12-30 2888
今天在研究keep-alive页面缓存的时候发现，切换到其他页面再切换回已打开的页面时，el-table表格出现底部还有空白，但是出现了滚动条的问题。查看控制台发现el-table__body-wrapper高度小于el-table的高度。如图： 解决： 在网上找了一些方法，发现doLayout()方法可以完美解决！ element2.0.5发布的该方法，可以用于重新计算表格布局 使用方法： 如果不是缓存页面，在mounted调用，如果是缓存页面，则在activated调用。 mo
设置padding后在滑动时覆盖padding区域
lixinxiaos的博客
11-27 1250
有没有遇到过这样的需求，在滑动到头的时候添加一个边距。在滑动时添加padding依然需要填充。 只需要在代码中添加如下代码即可（默认为true）： android:clipToPadding="false" 还有一个，就是如果子view大于parent的时候，是否要裁剪, clipchildren表示是否裁剪子View，当此属性的值为false时，子View的大小可以超过父View的大小。 an...
css的滚动条
Leatitia的博客
04-10 291
通常设置div滚动条时候，使用的是 /*始终显示滚动条*/ overflow:scroll /*按需显示滚动条*/ overflow:auto 自适应宽度同时自动显示滚动条的场景 overflow: scroll 内容自动撑开容器的宽度不包括滚动条，相当于滚动条是一个和内容并列显示的组件。 overflow: auto 内容撑开容器的宽度包括滚动条，即使用whitespace:...
html隐藏后还占位置,然后通过overflow: hidden样式即可使得超出（溢出）固定的高宽内容隐藏同时也不占用被隐藏地方位置...
weixin_33656238的博客
05-30 965
然后经过overflow: hidden样式即可使得超出(溢出)固定的高宽内容隐藏同时也不占用被隐藏中央地位，此案例可能进入css手册的overflow-y和css在线手册的overflow-x有具体的讲解对滚动条的设置隐藏或显示方法。div+css隐藏 内容方法 普通情况下，cssoverflow手册查看 3、利用overflow-y:hidden;和overflow-x:hidden控制滚动条...
css 滚动条导致padding-right失效
baidu_40537062的博客
09-06 1332
在子容器外面再套一层(亲测有效) <div class="father"> <div style="width: 300px; padding: 20px;"> <div class="son"></div> </div> </div> 参考博客 padding右边距失效问题，出现滚动条时，右边并没有出现留白 ...
css美化scrollbar
timeless的博客
03-02 906
ul.list{         margin: 10px;         padding-left:10px;         list-style:none;         max-height:86px;         width:250px;           overflow-y:auto;         overflow-x:hidden;         b
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案；TAdaptivePage 组件新增左右分栏布局）
热门推荐
wocwin的博客
04-24 1万+
vue项目 解决el-table自适应高度,vue页面不显示多条滚动条，超出的部分让el-table内部出现滚动条（推荐使用第二种解决方案）
css自定义横向滚动条样式,css滚动条样式自定义
weixin_32257101的博客
08-04 7227
很简单的几行代码Title* {margin: 0;padding: 0;}.out {width: 600px;height: 600px;margin: 100px auto;overflow-y: auto;}/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */.out::-webkit-scrollbar {width: 5px;height: 5px;}/* 滚动条里面小方块 */...
css开启滚动条如何一上来展示在最底部
07-16
你可以通过以下 CSS 样式来实现滚动条一上来展示在最底部： ```css .container { height: 200px; /* 指定容器的高度 */ overflow-y: scroll; /* 开启垂直滚动条 */ scroll-behavior: smooth; /* 平滑滚动效果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值