简体   繁体   English

为什么在我的文档中不溢出?

[英]Why doesn't overflow work in my document?

My Problem... 我的问题...
For some reason my scrolling wheel which I had made using css overflow: auto stopped working, why is that? 由于某种原因,我使用CSS overflow: auto制作的滚轮overflow: auto停止工作,为什么? The scrolling wheel is necessary as this is a long side bar which should have a scrolling wheel of its own 滚轮是必需的,因为这是一个较长的侧栏,应该有自己的滚轮

Note:I've removed a lot of li's and ul's so that I can post the question 注意:我删除了很多li和ul,以便发布问题

As well as that as you see in my code there are a lot of repetitive ul's and li's. 就像您在我的代码中看到的那样,还有很多重复的ul和li。 Is there an easier way to write all of this? 有没有更简单的方法来编写所有这些内容?

My Code... 我的代码...

<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>

My CSS... 我的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 */}

And my JavaScript... 还有我的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...)
}

Answer... 回答...

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...)
}

The problem was that I had two different pages, and the id was the same so they over wrote each other. 问题是我有两个不同的页面,并且id是相同的,所以他们互相写了信。 The fix was to simply make the same function for the height for the other page two. 解决方法是简单地为其他第二页的高度设置相同的功能。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM