@charset “UTF-8″;.markdown-body{font-family:-apple-system,system-ui,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial;color:#00325e}.markdown-body ::selection{background-color:#00325e;color:#fff}.markdown-body blockquote{padding:10px 20px;background-color:#fffaf0;box-shadow:0 3px 10px 0 rgba(255,172,194,.24);border:1px solid #f3ca8e;transition:all .2s;margin:1em 0;border-radius:5px}.markdown-body blockquote p{font-size:14px;line-height:25px;color:#795548}.markdown-body blockquote p:last-child{margin:0}.markdown-body blockquote:hover{border-color:#ff9800;background-color:#fff8e0;box-shadow:0 6px 10px -5px rgba(225,173,98,.3803921569)}.markdown-body blockquote code{color:#ff502c}.markdown-body pre{border:1px solid #8cc0f3;box-shadow:0 3px 10px 0 rgba(255,198,198,.28);border-radius:5px;transition:all .2s;overflow-x:auto;white-space:pre-wrap}.markdown-body pre:hover{border-color:#6d9dce}.markdown-body pre>code{padding:10px 20px;color:#00325e;background:#f0f8ff;font-size:12px;line-height:1.6;display:block}.markdown-body code{background:#f6fbff;color:#0b5393;padding:2px 4px;border-radius:4px;font-size:12px}.markdown-body p{font-size:14px;line-height:28px;text-align:justify;margin-bottom:17px;color:#595959}.markdown-body a{color:#00325e;text-decoration:none}.markdown-body a:after{content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAQdJREFUKFNt0DtLA0EUBeBzZle0Eks7rcUfEfBRCha7NorYa6NmVJzgyi4smUgKtdZGCJktLMVH4Y8QeztLWyE7VyLEuNFbXj4Oh0P8c8mZm+uJrEN4BJFTeP/MUVe3bnocfALwkOlo1zS7iZAzf6Cx7oXgbaqjxiDEWCcVaGyxQ8pSWo9XhqhoQ/xUFbaKjhe5V+CmR7mnSplEEF6GSmJ+F/d0KHvbCIIJCLc85U6BC5mONgbJNM3uFag++sX7z8O8MzsWBucifMx0dDGE1kmm458KDVukAlnNdDz/exEeW3dNkbfsYC0xtmgDWP6ELLZ0/F6BJu/UoFQN5AkoeUjeJPvx6+i+X5Sjah4tA6gYAAAAAElFTkSuQmCC);margin-left:2px}.markdown-body a:hover{box-shadow:0 1px}.markdown-body table{max-width:100%;border-collapse:collapse;border-spacing:0;box-shadow:0 3px 10px 0 rgba(255,238,172,.24);transition:all .2s}.markdown-body table:hover{box-shadow:0 3px 10px 0 rgba(185,169,103,.24)}.markdown-body table tr th{border:1px solid #8cc0f3;background-color:#f0f8ff;padding:12px 15px}.markdown-body table tr td{border:1px solid rgba(243,202,142,.4);padding:12px 15px}.markdown-body table tbody tr{transition:all .2s}.markdown-body table tbody tr:hover td{border-color:#f3ca8e;background-color:#fff8e0;z-index:1}.markdown-body img{max-width:100%}.markdown-body h1{font-size:20px;margin-top:30px;margin-bottom:10px;padding-left:30px;position:relative}.markdown-body h1>code{font-size:20px}.markdown-body h1:before{content:”?”;display:block;font-size:18px;width:18px;height:18px;left:0;position:absolute}.markdown-body h2{font-size:18px;margin-top:30px;margin-bottom:10px;padding-left:28px;position:relative}.markdown-body h2>code{font-size:18px}.markdown-body h2:before{content:”?”;display:block;font-size:16px;width:16px;height:16px;left:0;position:absolute}.markdown-body h3{font-size:16px;margin-top:30px;margin-bottom:10px;padding-left:26px;position:relative}.markdown-body h3>code{font-size:16px}.markdown-body h3:before{content:”?”;display:block;font-size:14px;width:14px;height:14px;left:0;position:absolute}.markdown-body h4{font-size:14px;margin-top:30px;margin-bottom:10px;padding-left:24px;position:relative}.markdown-body h4>code{font-size:14px}.markdown-body h4:before{content:”?”;display:block;font-size:12px;width:12px;height:12px;left:0;position:absolute}.markdown-body h5{font-size:12px;margin-top:30px;margin-bottom:10px}.markdown-body h5>code{font-size:12px}.markdown-body h6{font-size:10px;margin-top:30px;margin-bottom:10px}.markdown-body h6>code{font-size:10px}.markdown-body h1,.markdown-body h2{color:#ff502c}.markdown-body hr{height:4px;border:none;margin-top:32px;margin-bottom:32px;background-size:4px 1px;background-image:linear-gradient(270deg,#6d9dce,#8cc0f3 25%,transparent 50%)}.markdown-body hr:nth-child(2n){background-image:linear-gradient(270deg,#ff9800,#fff8e0 25%,transparent 50%)}.markdown-body ul{padding-inline-start:20px}.markdown-body ul li{list-style-type:”?”}.markdown-body ul li li{list-style-type:”◻️”}.markdown-body ul li li li{list-style-type:”▫️”}.markdown-body ol{padding-inline-start:20px}.markdown-body ol ::marker{color:#ff9800}.markdown-body ol,.markdown-body ul{line-height:2em}.markdown-body li{padding-inline-start:1ch}.markdown-body li.task-list-item{list-style:none;padding-inline-start:0}.markdown-body li input{padding-right:2px}.markdown-body li input[type=checkbox i]{appearance:none}.markdown-body li input:before{content:”?”;display:block;width:13px;height:13px}.markdown-body li input:checked:before{content:”✅”}@media (max-width:720px){.markdown-body h1{font-size:24px}.markdown-body h2{font-size:20px}.markdown-body h3{font-size:18px}}.hljs-comment,.hljs-quote{color:#6b7394}.hljs-attribute,.hljs-link,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c94922}.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#c76b29}.hljs-bullet,.hljs-string,.hljs-symbol{color:#ac9739}.hljs-section,.hljs-title{color:#3d8fd1}.hljs-keyword,.hljs-selector-tag{color:#6679cc}.markdown-body pre,.markdown-body pre>code.hljs{background:#f5f7ff;color:#5e6687}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
本篇文章给大家带来了关于前端的相关知识，其中主要给大家聊聊一个奇怪的水平滚动条问题，感兴趣的朋友下面一起来看一下吧，欢迎大家收藏学习！
今天改一个前端同学的样式代码,发现了一个奇怪的问题.
大概是这样：
我的视窗宽度是1920px，滚动容器宽度1903px，然后还出现了水平滚动条，匪夷所思。由于文件嵌套太深，查找起来非常耗时，因此就求助于全局函数，是谁触发了滚动条的操作。于是就有了以下代码
立即学习“前端免费学习笔记（深入）”；
function findScroller(element) { element.onscroll = function() { console.log(element)} Array.from(element.children).forEach(findScroller);}findScroller(document.body);
打印出的对象是 ，。这就不明白了。 明明元素离body还很远，也没有元素超宽，这个滚动条到底从哪儿来？
这并不是标准答案
非常难过，一个技能不行就要求助第二个方式 —— 删代码。 一行一行的删，然后将他转为基础元素，比如自定义的模型，直接替换成一个div，然后添加样式，再删除无用的代码，这样就做出来了一个简易模型。
经过观察发现， 如果元素没有超高，那么元素也不会出现横向滚动的问题，如果元素超高，则就会同时出现垂直和水平两个滚动条。
更迷惑了。
所以，我倒过来分析，发现，这个超高元素的宽度虽然没有超过视窗宽度，为1903px，但是，PC下浏览器滚动条默认宽度为17px，且此垂直滚动条是在body下的， 和上文的打印对象吻合。由此可知：
当容器出现滚动条后， 产生滚动条元素的可用水平宽度 = 原始宽度- 17px。一定有子元素设置的宽度 > 原始宽度- 17px ，且为有效像素单位 px，em ，rem， vw等子元素设置的宽度 = 原始宽度
这么一来就可知， 如果有body下的子元素的宽度设置为 1920px或者 100vw 或者等于100wv的任意一项，即可出现，此出现横向滚动条的现象。
经过老师傅的一顿操作，终于发现了一个设置样式不合理的问题。由此我简化了模型代码如下：
超宽导致元素溢出滚动条 body, html { margin: 0; padding: 0; } .menu-bar { height: 50px; border: 1px solid; box-sizing: border-box; } .incorrect { width: 100vw; } .oversize { height: 100vh; }
由此， 写代码时需要不断分析，css样式一定要有迹可循，切不可随意添加。导致异常出现时费心费力。
推荐学习：《web前端开发》
以上就是聊聊前端里一个奇怪的水平滚动条的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1551002.html
微信扫一扫 
支付宝扫一扫 
