为什么我的文档中没有溢出工作？答案

【问题标题】：Why doesn't overflow work in my document?为什么我的文档中没有溢出工作？
【发布时间】：2017-10-26 19:59:38
【问题描述】：

我的问题...
由于某种原因，我使用 css overflow: auto 制作的滚轮停止工作，这是为什么呢？滚轮是必要的，因为这是一个长边栏，应该有自己的滚轮

注意：我已经删除了很多 li 和 ul 以便我可以发布问题

正如您在我的代码中看到的那样，还有很多重复的 ul 和 li。有没有更简单的方法来编写所有这些？

我的代码...

<body>
    <div id="mainBar" class="mainBarOthers">
        <ul>
            <a href="EverythingPrg.html">
                <li class="theTitle">
                    Home Page
                </li>
            </a>
        </ul>
        <ul class="ulHighlight">
            <a href="Added Arrays.html" >
                <li>
                    Added Arrays 
                </li>
            </a>
        </ul>
        <ul>
            <a href="AddOrMinus.html">
                <li>
                    AddOrMinus
                </li>
            </a>
        </ul>
        <ul>
            <a href="ArayOnlyNumbers.html">
                <li>
                    ArayOnlyNumbers
                </li>
            </a>
        </ul>
        <ul>
            <a href="Array Drawing.html">
                <li>
                    Array Drawing
                </li>
            </a>
        </ul>
        <ul>
            <a href="Array Squared.html">
                <li>
                    Array Squared
                </li>
            </a>
        </ul>

我的 CSS...

.mainBarOthers {width: 18%; border-right: 2px solid black; background-color: #feffdd; float: left; overflow: auto; box-shadow: 0px 1px 10px black; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */-moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */}

还有我的 JavaScript...

window.onload = function () {
    setInterval (function () {
        height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);

        if (height != heightCheck) {
            height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);
            height = height - 52;
            heightCheck = height;
            document.getElementById ('mainBar').style.cssText = 'height:' + height;}
    }, 10); // This makes the main bar be the size of the page (can this slow the page down? Better way of doing it...)
}

【问题讨论】：

请点击 <> 并将您的代码转换为 minimal reproducible example - 安装拼写检查器也是个好主意
首先，你的应该在
里面，而不是相反......（虽然这可能不是解决你的问题的方法）

【解决方案1】：

回答...

var height;
var heightOthers;
var heightCheck;
var heightCheckOthers;

window.onload = function () {
    setInterval (function () {
        height = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);
        heightOthers = Math.max (document.body.scrollHeight, document.documentElement.clientHeight);

            $(function () {
                if ($('#mainBarOthers').length) {
                    if (heightOthers != heightCheckOthers) {
                    heightOthers = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);
                    heightCheckOthers = heightOthers;
                    document.getElementById ('mainBarOthers').style.cssText = 'height:' + heightOthers;
                    }
                }
                else if ($('#mainBar').length) {
                    if (height != heightCheck) {
                    height = Math.max (document.body.scrollHeight, document.documentElement.clientHeight);
                    height = height - 52;
                    heightCheck = height;
                    document.getElementById ('mainBar').style.cssText = 'height:' + height;
                }
            }
        }); 
    }, 10); // This makes the main bar be the size of the page (can this slow the page down? Better way of doing it...)
}

问题是我有两个不同的页面，并且 id 相同，所以它们互相重写。解决方法是简单地为其他第二页的高度创建相同的函数。

【讨论】：