页面出现横向滚动条的原因

最新推荐文章于 2024-05-24 17:17:32 发布
最新推荐文章于 2024-05-24 17:17:32 发布
阅读量1.2k 收藏 3
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Igiveufireworks/article/details/127356747
版权
博客讨论了在页面布局中使用vw单位和百分比设置body及背景图div宽度时出现的问题。由于vw计算包含了滚动条宽度，导致页面出现横向滚动条。解决这个问题的关键在于理解vw单位的计算方式与百分比的区别，并找到适当的调整方法以确保全屏显示无滚动条。
摘要由CSDN通过智能技术生成

设置页面body宽度和背景图div宽度的时候使用百分比%设置页面宽度，用vh和vw设置背景图宽度，本来应该都是占满整个屏幕，但是发现页面出现了横向滚动条。

100vw比页面正好多出来一个滚动条的宽度。原因是：

vw计算的是整个视口的宽度，包括滚动条
百分比计算宽度的后会不包括滚动条

 

Igiveufireworks
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2 行 JS 代码实现页面横向滚动特效
张旭乾 - 全栈工程师/海归
06-15 6287
在前端这个无奇不有的世界里，有些网站不是正常垂直滚动的，而是横向滚动的： 那么在没法把鼠标滚轮横过来的前提下（苹果除外），能否实现网页横向滚动呢？我们来写代码试试。先看一下最终效果，这里我用鼠标的滚轮垂直滚动，页面是横向滚动的。 要实现这个功能，只需要一点点的 JS 代码。 编写 HTML 结构 先看一下 HTML 结构，很简单，就是三个模拟全屏页面的 div，class 都是 page，然后放在一个 class 名为 container 的 div 容器中： <main> <di
解决移动端页面出现 X轴横向滚动条问题
w36680130的博客
04-16 159
解决移动端页面出现 X轴横向滚动条问题
容器div内容超出后，自动出现滚动条
xjj1314的专栏
08-21 3636
1、首先div(包括所有上级div)需要设置height 2、如果div同级没有其他div,可以设置overflow: auto <div sytle="height=100%;overflow: auto;"> 我是内容，我很高，我需要滚动条。 </div> 3、如果div不是最外面一层，有同级div，需要再加上position:absolute &...
css-自定义横竖滚动条样式
最新发布
2301_76671906的博客
05-24 1008
CSS的::-webkit-scrollbar伪元素来修改滚动条的外观，包括宽度、颜色、滑块的形状等。
超出div大小，溢出内容，出现滚动条，隐藏方式 记录下
ckyblack的博客
09-18 1311
1、横条隐藏，可滚动 套父容器div，高度小于子div,以达到隐藏的效果 竖向隐藏同理：如果是移动端请使用下面这段代码 // webkit 内核的浏览器才可以使用！ #app::-webkit-scrollbar{ width:0px; opacity:0; -webkit-overflow-scrolling: touch; } <!DOCTYPE html> <html> <head> &...
网页出现横向滚动条的原因可能是使用bootstrap不当引起
weixin_30244681的博客
01-25 644
Bootstrap的栅格布局超级方便我们写网页。但是在不是全体配合使用的情况下，会出现横向滚动条的现象。 什么叫不是配合使用的情况呢？ >>一种情况是：你使用了row作为你的第一层父元素；而row是有样式：margin-left: -15px;margin-right:-15px。 >> 就是这两个负数和作为第一层div导致了横向滚动条的出现。 >>其实这个...
移动端总宽度设置没问题啊，为什么在浏览器，和手机浏览器上运行，左右总会有滚动条啊
weixin_47600678的博客
05-22 299
移动端总宽度设置没问题啊，为什么在浏览器，和手机浏览器上运行，左右总会有滚动条啊
什么时候会出现横向滚动条，怎么处理
weixin_30617737的博客
11-28 1157
我把table的样式设置成width等于100%，max-width等于100%。今天在1280*968分辨率的屏幕上测试，竟然出现横向滚动条。原来是tbody里面的内容太多给撑开了。 解决方法是：将table的所有列的宽度都设置成等宽(百分比的形式，100除以列的个数)，这样就可以了，因为固定了宽度嘛。还有一点就是，如果表头和表体里面的内容很长，可以设置换行操作，这样就可以了 转载于:h...
uni-app中picker数据为对象数组如何使用，及获取picker选择之后的数据
qq_38541936的博客
12-10 2万+
关于uni-app中picker数据为对象数组如何使用，及获取picker选择之后的数据 文章目录先直接上展示和代码使用介绍获取选择的数据总结 先直接上展示和代码 这是完成后的效果展示 template中的代码 <view class="info-item"> 货主： <picker @change="bindPickerChange($event,storageCustomList[index])" :value="index" :range="storageCustomL
解决layui数据表格table的横向滚动条显示问题
10-16
根据fly社区给出的解释，横向滚动条出现的原因主要是因为数据表格的渲染有时会在浏览器的纵向滚动条出现之前完成。在这种情况下，浏览器会强制减少滚动条宽度的差，一般约为17px，从而导致横向滚动条的出现。这个...
iframe在IE6下出现横向滚动条的解决方案
09-22
最近的项目中，遇到ie6下当iframe出现纵向滚动条时同时会出现横向滚动条。分析了代码，大致的原因是iframe中的页面有相对body的样式包含width:100%的元素。
JS判断页面是否出现滚动条的方法
10-23
对于JavaScript来说，判断页面是否出现了水平或垂直滚动条是一个常见需求，这涉及到DOM元素的读取和判断技巧。本文将详细介绍如何用JavaScript来判断页面是否出现滚动条，并给出相应的实现方法。 首先，我们需要...
JS模仿横向滚动条
10-29
"JS模仿横向滚动条"这个主题，就是利用JavaScript来创建一个自定义的、模仿原生浏览器滚动条的行为，以提供更美观或者更符合设计需求的用户体验。 在传统的HTML页面中，滚动条是浏览器默认提供的，其样式和行为由...
基于jquery的横向滚动条（滑动条）
10-28
然而，Windows系统内置的横向滚动条仅限于在内容下方显示。在某些情况下，可能需要在内容上方也显示一个滚动条，以提高用户体验。本文将介绍如何利用jQuery的Slider控件创建一个既能兼容多种浏览器，又能同时在顶部...
layui表格自适应宽度出现横向滚动条
qq_39280563的博客
09-06 1万+
上bug图： 横向出现了滚动条，逼死强迫症了。控制台打开，审查元素，发现多了一列： 官方给出的解决方案：https://fly.layui.com/jie/18737/ 我的代码就是因为表格高度给高了几个像素导致页面出现了滚动条(不信你回去看第一张图~)，调整表格高度就好了。 如果你们的问题还没有解决，可以看看是不是自定义的宽度导致的，参考文章： https://blog.csdn.net/dreamer0823/article/details/105689228/ ...
h5页面横向滚动条定位
weixin_45977260的博客
09-03 877
h5代码 //定位 function dingwei(weizhi){ var $objTr = $(weizhi); //找到要定位的地方 var objTr = $objTr[0]; //转化为dom对象 $(".fenleibie").animate({scrollLeft:objTr.offsetLeft},"slow"); //左定位 ,上定位为scrollTop } //页面加载之后定位到想要的di...
layui使用总结--解决数据表格出现横向滚动条的情况
yoonhi
04-22 1万+
在 x-admin 后台框架中使用 layui 的数据表格 表格下方出现了滚动条，看着十分碍眼 如图 但是我发现，只要将最左边的复选框去掉，便不会出现滚动条 如图 滚动条就没了 当然这不是最优解 因为有些情况下是需要用到复选框的 那么如何在既显示复选框的情况下，又没有这可恶的滚动条呢 大致在百度到一些相关问题和答案 仅供参考 ...
layui数据表格table的横向滚动条显示问题
热门推荐
c1286912980的博客
10-15 3万+
加上这段样式代码就可以解决了： &lt;link type="text/css" rel="stylesheet" href="layui/css/layui.css" /&gt; &lt;style&gt;     body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */ &lt;/style&gt;   ps：这个问题fly社区给出的解释是：table..
html页面未超出范围却出现滚动条，解决方法
努力、拼搏、奋进
09-28 3496
html页面未超出范围却出现滚动条，解决方法
vue前端页面出现横向滚动条怎么办
04-28
如果你的 Vue 前端页面出现了横向滚动条，可以按照以下几个步骤解决： 1. 检查 HTML 结构和 CSS 样式，看看是否存在宽度超出父元素的情况。 2. 可以在 CSS 样式中添加 `overflow-x: hidden`，这样可以隐藏横向滚动条，但不会影响纵向滚动。 3. 如果你的页面中有使用到某些组件，可以检查这些组件是否存在问题，例如某个组件的宽度设置过大等。 4. 检查是否存在浏览器兼容性问题，可以尝试在不同的浏览器中查看页面效果。 希望这些方法能够帮助你解决横向滚动条的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值