滚动条出现时影响布局问题

最新推荐文章于 2022-05-27 11:03:10 发布
最新推荐文章于 2022-05-27 11:03:10 发布
阅读量1.3k 收藏
点赞数
文章标签： js vue.js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32973061/article/details/121425177
版权

   放置滚动内容的盒子设置固定宽度，

   其父盒子的 宽度设置滚动内容宽度+20px（可调整）、固定高度和overflow-x:hidden,overflow-y:scroll;


   此法是单独设置 父盒子一定宽度展示滚动条，滚动条区域和展示内容盒子分开设置。并且滚动条会成为设置滚动条盒子padding的一部分

窥月
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css滚动条：鼠标移入移出显示鼠标移除隐藏，不影响html布局
zhugg77的博客
08-23 5373
问题：鼠标移入移出显示鼠标移除隐藏，影响html布局？ <div class='div1'> <div class='div2'> <div> <div>我是谁我在干什么</div> <div>我是谁我在干什么</div> <div>我是谁我在干什么<...
用div+css解决出现水平滚动条问题
10-30
在 Web 开发中，水平滚动条的出现是一个常见的问题，特别是在使用 div + CSS 布局时。今天，我们将讨论如何使用 div + CSS 解决出现水平滚动条问题。 问题分析 在上面的代码中，我们可以看到，开发者定义了一个...
CSS3 Calc实现滚动条出现页面不跳动问题
12-13
什么是calc()? calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 语法 calc() = calc(四则运算) 例如： .elm { width: calc(expression); } 其中"expre
页面出现滚动条的时候如何让滚动条不影响页面宽度
09-22
主要介绍了页面出现滚动条的时候如何让滚动条不影响页面宽度，需要的朋友可以参考下
滚动条出现，挤压页面宽度，导致布局错乱的三种解决方法
热门推荐
qq_36132291的博客
04-21 1万+
出现原因 页面内容超出高度，浏览器出现滚动条的时候，因为滚动条是占位的，所以页面会被挤压，导致页面内容出现错乱。 解决方案一：新属性 overlay （目前仅chrome支持） chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 解决方案二：margin-right: calc(100%
使用 scrollbar-gutter CSS 属性解决由滚动条引起的不必要的布局偏移
12-11 4340
使用 scrollbar-gutter CSS 属性解决由滚动条引起的不必要的布局偏移
实现表格标题栏固定，当内容超出指定宽度出现滚动条后会破坏原有布局，这时可以用perfect-scrollbar插件
测试喵~
12-28 654
方法一：标题栏和内容在同一表格 1、如果在同一表格标题栏必须要加&lt;thead&gt;&lt;/thead&gt;标签，内容必须要用&lt;tbody&gt;&lt;/tbody&gt;标签包裹，并使两者变成块元素。       这样就可以得到如下效果了   方法二：也可以用两个表格实现      ...
滚动条出现挤压页面宽度，影响布局
mini_1251861209的博客
05-27 2283
问题描述：当页面突然出现滚动条的时候，页面会突然被挤压，因为滚动条也是需要占位的呀。 解决思路：现在目标就是滚动条出现，但是内容位置不变，依然不动。 1、新属性overlay chrome下overflow有个新的属性值overlay，这个属性简直就是为了这个问题而生，他和auto有点像，但是区别就是在触发滚动条时候并不挤压空间。但是非常遗憾，这个属性值目前只有chrome支持。 html { overflow-y: overlay; } 2、margin-right: calc(100%
隐藏滚动条 页面仍然可以滚动 解决滚动条出现挤压页面宽度，影响布局.
S_peeding的博客
04-01 1332
随手记 直接放图看问题: 出现这种情况就将滚动条隐藏就好了 改为: 这样子就好了,页面依然可以滚动
pc端滚动条影响布局
YingDaoMonkey的博客
04-16 424
思路：让滚动条在内容有没有超出来的时候都显示出来，这样的话就不会影响布局了。给html加一个属性 overflow-y:scroll;
滚动条的显示与隐藏导致页面抖动
qq_1016371234的博客
10-09 1108
padding-left: calc(100vw - 100%);
CSS设计之页面滚动条出现时防止页面跳动的方法
12-11
一、水平居中布局与滚动条跳动的千年难题 当前web届，绝大多数的页面间布局都是水平居中布局，主体定个宽度，然后margin: 0 auto的节奏~ 例如，大淘宝的首页： 然而，这种布局有一个存在一个影响用户体验的隐患。...
html让局部强制出现滚动条不破坏整体的样式和布局
12-14
先贴出效果图: 局部出现滚动条,这样就不会破坏整体的样式和布局了. 范例代码: 复制代码代码如下: <html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″> &lt...
导航栏影响滚动视图的内部布局问题
u013915422的博客
03-16 648
http://www.2cto.com/kf/201409/334389.html
滚动条设置
anchaqian9321的博客
12-20 276
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置...
小小小tip：避免滚动条显隐对页面其他元素的影响
flying meng的菜鸟居
01-21 3304
点这里直接到下面看解决方案 自古以来，滚动条都是用户体验大难关，也在不断进化。一者滚动条样式在浏览器间表现不一致，从而有人提出“顶部阅读进度”方案；二者在window下，滚动条本身是占位的！这就导致了天生考虑响应式的现代页面中元素会受到影响从而“跳动”。 经常有下面的场景的发生： “加载更多” 页面懒加载 模板页面跳转/路由跳转 共同点都是：从不足一屏到超出一屏。 淘宝网首页使用CSS把页面尺寸布局骨架搭好，再在里面吐数据。 但即使是这样，他们还是做了overflow-x:hidden;。一方面是为.
html鼠标滑动隐藏菜单栏,CSS实现鼠标移入显示滚动条，移出隐藏滚动条
weixin_39521651的博客
06-03 2071
网页基本结构：测试滚动条测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表测试列表1、实现鼠标移入显示滚动条，鼠标移出隐藏滚动条：.list {width: 100px;height: 200p...
盒模型之滚动条
weixin_30376509的博客
07-06 297
　　众所周知，盒子模型的宽度 = width + paddingLeft + paddingRight + boderLeftWidth + borderRightWidth;但如果元素存在滚动条，又将该如何计算呢？ 　　看下demo： <style type="text/css"> * { margin: 0; padding: ...
缩小浏览器时布局不变使其出现平滑滚动条
最新发布
05-26
要实现缩小浏览器时布局不变，但出现平滑滚动条的效果，可以使用 CSS 中的 `overflow` 属性。具体做法如下： 1. 在需要出现滚动条的元素上添加 `overflow: auto;` 或 `overflow: scroll;` 样式，这会使元素出现滚动条。 2. 为了让滚动条出现在元素的内部，而不是覆盖在元素上，可以使用 `padding` 属性为元素设置一定的内边距。 3. 使用 CSS 中的 `::-webkit-scrollbar` 伪元素为滚动条添加样式，例如修改滚动条的颜色、宽度等。 4. 如果需要实现平滑滚动条的效果，可以使用 `::-webkit-scrollbar-thumb` 伪元素为滚动条的拖动条添加样式，例如修改拖动条的颜色、圆角等。 下面是一个示例代码： ``` <style> .scrollable { overflow: auto; padding: 10px; } .scrollable::-webkit-scrollbar { width: 10px; height: 10px; background-color: #f5f5f5; } .scrollable::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px; } </style> <div class="scrollable"> <!-- 这里放置需要滚动的内容 --> </div> ``` 在上面的示例中，我们创建了一个名为 `scrollable` 的样式类，为其设置了 `overflow: auto;` 和 `padding: 10px;` 样式，使元素出现滚动条，并设置了一定的内边距。然后，使用 `::-webkit-scrollbar` 伪元素为滚动条添加样式，为其设置了宽度、高度和背景色。最后，使用 `::-webkit-scrollbar-thumb` 伪元素为拖动条添加样式，为其设置了背景色和圆角。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值