overflow 滚动条占位的问题

最新推荐文章于 2022-04-08 14:21:02 发布
最新推荐文章于 2022-04-08 14:21:02 发布
阅读量1.6k 收藏 1
点赞数 1
分类专栏： web 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/GRY_YJ/article/details/117398585
版权

关于overflow 滚动条出现的问题
1.overflow:auto 页面小于规定高度后，出现滚动条，大于规定高度，滚动条消失,不占位置大小
2.overflow:scroll;页面小于规定高度后，出现滚动条，大于规定高度，滚动条消失,但是占位置大小

页面出现滚动条的时候如何让滚动条不影响页面宽度
09-22
主要介绍了页面出现滚动条的时候如何让滚动条不影响页面宽度，需要的朋友可以参考下
滚动条出现，挤压页面宽度，导致布局错乱的三种解决方法
qq_36132291的博客
04-21 1万+
出现原因 页面内容超出高度，浏览器出现滚动条的时候，因为滚动条是占位的，所以页面会被挤压，导致页面内容出现错乱。 解决方案一：新属性 overlay （目前仅chrome支持） chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 解决方案二：margin-right: calc(100%
滚动条不占位 overlay属性
Menqq的博客
04-08 1万+
overflow-y: overlay overflow的值为overlay，它的行为与auto相同的，但是在溢出时出现滚动条的展示方式有区分，overlay是覆在……上面，它是不占位的； 例如： 在表格中使用overflow-y: overlay： 滚动条是不占位的，而滚动条占位会使数据整体向某个方向移动； 注意：在Chrome浏览器中受支持； 若设置后在火狐浏览器中滚动条不生效，在写一个overflow: auto;，火狐浏览器中无法像谷歌浏览器里那样overlay； ...
html 占用空间 滚动轴_修复一个因为 scrollbar 占据空间导致的 bug
weixin_34184847的博客
12-22 368
背景这一个因为滚动条占据空间引起的bug, 查了一下资料， 最后也解决了，顺便研究一下这个属性， 做一下总结，分享给大家看看。正文昨天， 测试提了个问题， 现象是一个输入框的聚焦提示偏了， 让我修一下, 如下图：起初认为是红框提示位置不对， 就去找代码看： // ... onFocus={() => setFocusedInputName('guidePrice')} onB...
css使用overflow属性控制滚动条的样式
09-22
因此，在使用自定义滚动条样式时，应考虑跨浏览器的兼容性问题。 总的来说，`overflow`属性和相关样式提供了强大的工具，帮助开发者精细控制内容溢出时的行为，并创建具有吸引力的滚动条设计。通过熟练运用这些特性...
使用overflow: hidden来禁用页面滚动条
09-28
在这个主题中，我们将详细介绍如何使用CSS属性`overflow: hidden`来禁用页面滚动条。这个属性是一种简单而又快速的方法来实现滚动条的禁用，而且它也能够兼容较老的浏览器，如IE6和IE7。 `overflow`属性是CSS中的一...
css 设置overflow:scroll 滚动条的样式
01-19
css 设置overflow:scroll 滚动条的样式 /* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1); } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-...
关于HTML中的滚动条/去掉滚动条问题
12-14
滚动条的样式通常包含以下几个部分： 1. `scrollbar-3dlight-color`: 滚动条的最外侧边缘颜色。 2. `scrollbar-highlight-color`: 滚动条上的高亮部分颜色，例如鼠标悬停时。 3. `scrollbar-face-color`: 滚动条主体...
滚动条占位解决方案
weixin_38763607的博客
04-13 1545
overflow: overlay 这个命令下 滚动条会悬浮在盒子里 但是兼容较差 safari，chrome支持。。
CSS -自定义滚动条样式
kelly0721的博客
02-25 541
以下没有经过探究，只针对webkit内核的浏览器 滚动条的组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb） ::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的位置 ::-webkit-scrollbar-track-piece 内层轨道，
关于滚动条占位出现的问题
songshuguowang的专栏
03-09 3368
由于我的网页设置了最小宽度为1200px 当浏览器窗口拖拽到宽度小于1200px时，页面底部出现了横向滚动条 这个滚动条我是需要的，但是滚动条的出现导致页面高度增加，这样走向的滚动条也出来了 解决办法是增加了一个动态的margin-bottom margin-bottom: calc(100vh - 100%); 100vh代表相对于浏览器的window.innerHeight，是浏览...
滚动条占据着谁的位置
weixin_33690963的博客
08-11 648
我在div上设置width是200px，但是在审查元素的盒模型里就成了183 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ ...
不隐藏滚动条使滚动条不占据位置
weixin_45634433的博客
07-14 4053
问题描述: 之前自己仿写了一个聊天机器人的小项目,页面的高度会随着聊天数量的增加而变大,进而出现滚动条,滚动条默认的宽度是17px,所以每次出现滚动条右边的内容区域就会被挤压,影响布局 解决办法: 1.使用margin-right:calc(100% - 100vw ); 100% 是浏览器的可用宽度 , 100vw是浏览器的内部宽度window.innerWidth 是包含滚动条在内的宽度,在没有滚动条的时候margin-right:0;没哟影响,在有滚动条的时候,margin-right:-17px,
css设置不可页面滚动但还占着位置
Lyran的博客
04-25 1429
html.noscroll, html.noscroll body { overflow: hidden !important; /* height: 100% !important; */ //显示的时候会默认把页面置顶、隐藏只兼容chrome } html.noscroll { overflow-y: scroll !important; //这个必须在后面 ...
滚动条挤占内容宽度、破坏布局
jingge_nihao的博客
11-30 1865
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;title&gt;&lt;/title&gt;     &lt;meta charset="utf-8"&gt;     &lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1
滚动条挤占内容宽度、破坏布局的解决方案
热门推荐
Beijiyang
08-21 3万+
问题 当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。 原因 滚动条的宽度是计算到内容 content 里的。 解决思路 增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。 具体案例 使用 antd 的 Modal 弹窗，基于其最简单的基本示例，如图： 希望的效果： 弹窗定宽定高； 一排4个，宽度、边距固定； 当总...
vue 滚动条怎么不占位值
最新发布
11-02
Vue.js本身并不直接提供滚动条的高度信息，但它可以配合其他库和CSS样式来实现滚动条不占用内容高度的效果。通常我们通过以下步骤来实现： 1. **禁用默认滚动条**：使用`::-webkit-scrollbar`或`:Scrollbar`伪元素，在CSS中设置滚动条宽度为0或隐藏，并移除默认样式。例如： ```css .scrollable { -ms-overflow-style: none; /* IE 和 Edge */ scrollbar-width: none; } .scrollable::-webkit-scrollbar { /* WebKit 内核滚动条 */ width: 0; } ``` 2. **自定义滚动条**：如果需要显示滚动条，可以创建一个可滚动容器，并为其添加自定义滚动条。可以使用`custom-scrollbar`库，或者自己编写CSS并绑定事件。 ```html <div class="scrollable custom-scrollbar"> <!-- Your content here --> </div> ``` 3. **计算剩余空间**：在JavaScript中，你可以获取到可视区的实际高度和内容区域的高度，然后动态调整内容的padding-bottom或其他布局属性来填充空白。这通常结合Vue的计算属性和DOM操作来完成。 ```javascript export default { data() { return { scrollHeight: 0, scrollTop: 0, }; }, computed: { remainingSpace() { return this.scrollHeight - this.scrollTop - document.documentElement.clientHeight; }, }, watch: { scrollTop(newTop) { // 更新内容高度或padding-bottom }, }, }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值