Javascript 滚动列表不工作

Javascript 滚动列表不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我遵循了“教程”,但它不起作用。我将把所有相关代码放在下面。我相当肯定它不起作用的原因是因为我有overflow-y:hidden在主体中,列表包含在主体中,因此可能是默认值。但是,如果我不这样做,整个页面将滚动,而不仅仅是列表。非常感谢 函数搜索栏(){ var输入、滤波器、ul、li、a、i; 输入=document.getElementById(“myInput”); filter=input.value.toUpperCase(); ul=document.getElementById

我遵循了“教程”,但它不起作用。我将把所有相关代码放在下面。我相当肯定它不起作用的原因是因为我有
overflow-y:hidden在主体中,列表包含在主体中,因此可能是默认值。但是,如果我不这样做,整个页面将滚动,而不仅仅是列表。非常感谢

函数搜索栏(){
var输入、滤波器、ul、li、a、i;
输入=document.getElementById(“myInput”);
filter=input.value.toUpperCase();
ul=document.getElementById(“myUL”);
li=ul.getElementsByTagName(“li”);
对于(i=0;i-1){
李[i].style.display=“”;
}否则{
li[i].style.display=“无”;
}
}
}
正文{
背景色:#081543;
溢出y:隐藏;
}
p{
颜色:白色;
文本对齐:居中;
身高:25%;
字号:25pt;
左缘:30%;
保证金权利:30%;
字体系列:无衬线;
}
#标志{
显示:块;
左边距:自动;
右边距:自动;
宽度:50%;
}
* {
框大小:边框框;
}
#我的输入{
宽度:50%;
字体大小:16px;
填充:12px 0px 12px 10px;
边框:1px实心#ddd;
边缘底部:12px;
左边缘:25%;
右边距:25%;
}
保险商实验室{
最小高度:200px;
}
#密尔{
列表样式类型:无;
填充:0;
保证金:0;
溢出:滚动;
}
#李美儿{
边框:1px实心#ddd;
页边顶部:-1px;
背景色:#f6f6f6;
宽度:50%;
左边缘:25%;
右边距:25%;
填充:12px;
文字装饰:无;
字号:18px;
颜色:黑色;
显示:块;
}
#myUL li a:悬停:非(.header){
背景色:#eee;
}


在元件
ul
min height
上使用
height

函数搜索栏(){
var输入、滤波器、ul、li、a、i;
输入=document.getElementById(“myInput”);
filter=input.value.toUpperCase();
ul=document.getElementById(“myUL”);
li=ul.getElementsByTagName(“li”);
对于(i=0;i-1){
李[i].style.display=“”;
}否则{
li[i].style.display=“无”;
}
}
}
正文{
背景色:#081543;
溢出y:隐藏;
}
p{
颜色:白色;
文本对齐:居中;
身高:25%;
字号:25pt;
左缘:30%;
保证金权利:30%;
字体系列:无衬线;
}
#标志{
显示:块;
左边距:自动;
右边距:自动;
宽度:50%;
}
* {
框大小:边框框;
}
#我的输入{
宽度:50%;
字体大小:16px;
填充:12px 0px 12px 10px;
边框:1px实心#ddd;
边缘底部:12px;
左边缘:25%;
右边距:25%;
}
保险商实验室{
高度:150像素;
}
#密尔{
列表样式类型:无;
填充:0;
保证金:0;
溢出:滚动;
}
#李美儿{
边框:1px实心#ddd;
页边顶部:-1px;
背景色:#f6f6f6;
宽度:50%;
左边缘:25%;
右边距:25%;
填充:12px;
文字装饰:无;
字号:18px;
颜色:黑色;
显示:块;
}
#myUL li a:悬停:非(.header){
背景色:#eee;
}


要显示滚动条,您需要使
ul
的高度小于其子元素的高度,以便有内容可以滚动。您还可以使用
overflow-y:auto
而不是
overflow:auto
隐藏水平阴囊

函数搜索栏(){
var输入、滤波器、ul、li、a、i;
输入=document.getElementById(“myInput”);
filter=input.value.toUpperCase();
ul=document.getElementById(“myUL”);
li=ul.getElementsByTagName(“li”);
对于(i=0;i-1){
李[i].style.display=“”;
}否则{
li[i].style.display=“无”;
}
}
}
正文{
背景色:#081543;
溢出y:隐藏;
}
p{
颜色:白色;
文本对齐:居中;
身高:25%;
字号:25pt;
左缘:30%;
保证金权利:30%;
字体系列:无衬线;
}
#标志{
显示:块;
左边距:自动;
右边距:自动;
宽度:50%;
}
* {
框大小:边框框;
}
#我的输入{
宽度:50%;
字体大小:16px;
填充:12px 0px 12px 10px;
边框:1px实心#ddd;
边缘底部:12px;
左边缘:25%;
右边距:25%;
}
保险商实验室{
高度:200px;
}
#密尔{
列表样式类型:无;
填充:0;
保证金:0;
溢出y:滚动;
}
#李美儿{
边框:1px实心#ddd;
页边顶部:-1px;
背景色:#f6f6f6;
宽度:50%;
左边缘:25%;
右边距:25%;
填充:12px;
文字装饰:无;
字号:18px;
颜色:黑色;
显示:块;
}
#myUL li a:悬停:非(.header){
背景色:#eee;
}


您的指示是正确的,body overflow:hidden导致了问题。然而,我也注意到,在你的ul的css中,你有一个最小高度。所有这一切都将继续增加你的ul的大小,超过身体的点,在那里它将被隐藏

滚动的目的是使您能够在内容的高度或宽度超过其所在元素的边界时查看内容-通过包含最小高度,它不会超过这些边界,而是增加这些边界

将你的ul最小高度更改为不同的高度,你会很好:)希望这有帮助

如复信上所述