滚动未显示在 jquery 创建的列表中

Scroll not shown in list created by jquery

本文关键字：列表 创建 jquery 显示 滚动      更新时间：2023-09-26

所以我有一个带有列表ul的html框： 

<div id="profile_photo_conteiner">
                <ul>
     </ul>
 </div>

在此列表中，我使用jquery添加了一些图片：

...
   var i =1;
    var num = 10;
    while (i <= num)
        {
                        $( "#profile_photo_conteiner ul" ).append("'
                        <li>'
                            <img src='"'"/>'
                            <div class='"gallery_image_title'">'
                                <h5 class='"gallery_title'">Click me</h5>'
                            </div>'
             </li>'
                    ");

所有内容都显示出来，但我没有按 x 轴滚动。我尝试了很多变化，并发现如果我删除 ul 和 li 并只添加图片，就会显示滚动，但一旦我尝试使用 ul，它就不会显示。JSFIDDLE - 代码 - 这是我的一些测试代码。那么列表 ul 是否有选项来拖钓它们？CSS 的一部分：

#profile_photo_conteiner {
height: 210px;
padding-top: 10px;
overflow-y: hidden;
    overflow-x: auto;
width: 200x;
white-space:nowrap;
margin-bottom: 55px;
border: solid 1px red;
}
/*-galery*//*
#profile_photo_conteiner ul {
  overflow-x:scroll;
  overflow-y:hidden;
}*/

#profile_photo_conteiner ul li{
    float: left;
    margin-right: 10px;
    margin-left: 10px;
    padding: 10px;
    list-style-type: none;
    position:relative;
    cursor: pointer;

}
#profile_photo_conteiner ul li img {
    display: block;
    width: 150px;
    height: 150px;
}

所以我删除了jquery代码，因为问题不在其中好的，所以这里是内容 - 它是相同的代码，但高度超过 1000 像素，以表明我们有足够的内容，内容 -2 - AGIN 相同的代码，但具有正常高度，所以我们有 anogh 内容 Oveflow-y 被隐藏，你看不到结果的其余部分，溢出 X 没有出现（如果我把溢出-x 滚动）滚动将显示，但它不起作用，因为内容不按 x 轴。

从您的代码来看，您似乎通过 css 隐藏了垂直滚动条：

overflow-y: hidden;

这应该是

overflow-y: auto;

然后，您可以通过对overflow-x执行相反的操作来隐藏水平滚动

更新的小提琴

由于内容尚未溢出，因此您无法看到您的意思/想要的水平滚动（x 轴）。您可以尝试通过将容器的最大宽度设置为小于内容来触发此操作。

max-width: certain-px-smaller-than-content;

如果要显示垂直滚动，可以设置

overflow-y: auto;
overflow-x: hidden;
相关文章：