为什么溢出在我的文档中不起作用?
Why doesn't overflow work in my document?
我的问题...
由于某种原因,我使用 css overflow: auto
制作的滚轮停止工作,这是为什么?滚轮是必需的,因为这是一个长边栏,应该有自己的滚轮
注意:我删除了很多 li 和 ul,这样我就可以 post 这个问题
正如您在我的代码中看到的那样,还有很多重复的 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...)
}
回答...
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 是相同的,所以他们互相重写了。解决方法是简单地为其他两页的高度制作相同的功能。
我的问题...
由于某种原因,我使用 css overflow: auto
制作的滚轮停止工作,这是为什么?滚轮是必需的,因为这是一个长边栏,应该有自己的滚轮
注意:我删除了很多 li 和 ul,这样我就可以 post 这个问题
正如您在我的代码中看到的那样,还有很多重复的 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...)
}
回答...
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 是相同的,所以他们互相重写了。解决方法是简单地为其他两页的高度制作相同的功能。