本篇文章給大家?guī)砹岁P(guān)于前端的相關(guān)知識，其中主要給大家聊聊一個奇怪的水平滾動條問題，感興趣的朋友下面一起來看一下吧，歡迎大家收藏學習！
今天改一個前端同學的樣式代碼,發(fā)現(xiàn)了一個奇怪的問題.
(資料圖)
大概是這樣：
我的視窗寬度是1920px，滾動容器寬度1903px，然后還出現(xiàn)了水平滾動條，匪夷所思。由于文件嵌套太深，查找起來非常耗時，因此就求助于全局函數(shù)，是誰觸發(fā)了滾動條的操作。于是就有了以下代碼
function findScroller(element) { element.onscroll = function() { console.log(element)} Array.from(element.children).forEach(findScroller);}findScroller(document.body);打印出的對象是 ，<body>。這就不明白了。 明明元素離body還很遠，也沒有元素超寬，這個滾動條到底從哪兒來？
非常難過，一個技能不行就要求助第二個方式 —— 刪代碼。 一行一行的刪，然后將他轉(zhuǎn)為基礎(chǔ)元素，比如自定義的模型，直接替換成一個div，然后添加樣式，再刪除無用的代碼，這樣就做出來了一個簡易模型。
經(jīng)過觀察發(fā)現(xiàn)， 如果元素沒有超高，那么元素也不會出現(xiàn)橫向滾動的問題，如果元素超高，則就會同時出現(xiàn)垂直和水平兩個滾動條。
更迷惑了。
所以，我倒過來分析，發(fā)現(xiàn)，這個超高元素的寬度雖然沒有超過視窗寬度，為1903px，但是，PC下瀏覽器滾動條默認寬度為17px，且此垂直滾動條是在body下的， 和上文的打印對象吻合。由此可知：
這么一來就可知， 如果有body下的子元素的寬度設(shè)置為 1920px或者 100vw 或者等于100wv的任意一項，即可出現(xiàn)，此出現(xiàn)橫向滾動條的現(xiàn)象。
經(jīng)過老師傅的一頓操作，終于發(fā)現(xiàn)了一個設(shè)置樣式不合理的問題。由此我簡化了模型代碼如下：
<!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樣式一定要有跡可循，切不可隨意添加。導致異常出現(xiàn)時費心費力。
推薦學習：《web前端開發(fā)》
以上就是聊聊前端里一個奇怪的水平滾動條的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞：
營業(yè)執(zhí)照公示信息