聊聊前端里一个奇怪的水平滚动条-电脑自学网

@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>。这就不明白了。明明元素离body还很远，也没有元素超宽，这个滚动条到底从哪儿来？

这并不是标准答案

非常难过，一个技能不行就要求助第二个方式 —— 删代码。一行一行的删，然后将他转为基础元素，比如自定义的模型，直接替换成一个div，然后添加样式，再删除无用的代码，这样就做出来了一个简易模型。

经过观察发现，如果元素没有超高，那么元素也不会出现横向滚动的问题，如果元素超高，则就会同时出现垂直和水平两个滚动条。

更迷惑了。

所以，我倒过来分析，发现，这个超高元素的宽度虽然没有超过视窗宽度，为1903px，但是，PC下浏览器滚动条默认宽度为17px，且此垂直滚动条是在body下的，和上文的打印对象吻合。由此可知：

当容器出现滚动条后，产生滚动条元素的可用水平宽度 = 原始宽度- 17px。
一定有子元素设置的宽度 > 原始宽度- 17px ，且为有效像素单位 px，em ，rem， vw等
子元素设置的宽度 = 原始宽度

这么一来就可知，如果有body下的子元素的宽度设置为 1920px或者 100vw 或者等于100wv的任意一项，即可出现，此出现横向滚动条的现象。

经过老师傅的一顿操作，终于发现了一个设置样式不合理的问题。由此我简化了模型代码如下：


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超宽导致元素溢出滚动条</title>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        .menu-bar {
            height: 50px;
            border: 1px solid;
            box-sizing: border-box;
        }

        .incorrect {
            width: 100vw;
        }

        .oversize {
            height: 100vh;
        }
    </style>
</head>

<body>
    <div class="menu-bar incorrect"> </div>
    <div></div>
</body>

</html>

登录后复制

由此，写代码时需要不断分析，css样式一定要有迹可循，切不可随意添加。导致异常出现时费心费力。

推荐学习：《web前端开发》

以上就是聊聊前端里一个奇怪的水平滚动条的详细内容，更多请关注电脑自学网其它相关文章！

文章来源于网络，版权归作者所有，若侵犯您的权益请留言告知！

THE END