答案 0 :(得分:0)
您可以使用少量的html / css :)完成此操作。我没有添加图片,但是如果您愿意,可以添加。同样,如果您愿意,您可以将滚动条修改为自定义,如马特在其评论中提到的那样。坦白地说,滚动条不值得外部js库做额外的工作。
* {
box-sizing: border-box;
}
body {
font-family: arial, sans-serif;
}
.scroll-list {
background-color: #ededed;
width: 20rem;
height: 40rem;
overflow: hidden;
}
.scroll-list__header {
background-color: #dcdcdc;
margin: 0;
padding: 2rem;
text-transform: uppercase;
}
.scroll-list__content {
display: block;
list-style-type: none;
overflow-y: scroll;
height: 100%;
padding: 0 0 8rem 0;
margin: 0;
}
.scroll-list__item {
padding: 1rem;
border-bottom: 1px solid #cccccc;
}
<div class="scroll-list">
<h2 class="scroll-list__header">70 people going</h2>
<ul class="scroll-list__content">
<li class="scroll-list__item">name 1</li>
<li class="scroll-list__item">name 2</li>
<li class="scroll-list__item">name 3</li>
<li class="scroll-list__item">name 4</li>
<li class="scroll-list__item">name 5</li>
<li class="scroll-list__item">name 6</li>
<li class="scroll-list__item">name 7</li>
<li class="scroll-list__item">name 8</li>
<li class="scroll-list__item">name 9</li>
<li class="scroll-list__item">name 10</li>
<li class="scroll-list__item">name 11</li>
<li class="scroll-list__item">name 12</li>
<li class="scroll-list__item">name 13</li>
<li class="scroll-list__item">name 14</li>
<li class="scroll-list__item">name 15</li>
<li class="scroll-list__item">name 16</li>
<li class="scroll-list__item">name 17</li>
<li class="scroll-list__item">name 18</li>
<li class="scroll-list__item">name 19</li>
<li class="scroll-list__item">name 20</li>
<li class="scroll-list__item">name 21</li>
<li class="scroll-list__item">name 22</li>
<li class="scroll-list__item">name 23</li>
<li class="scroll-list__item">name 24</li>
<li class="scroll-list__item">name 25</li>
<li class="scroll-list__item">name 26</li>
<li class="scroll-list__item">name 27</li>
<li class="scroll-list__item">name 28</li>
<li class="scroll-list__item">name 29</li>
<li class="scroll-list__item">name 30</li>
<li class="scroll-list__item">name 31</li>
<li class="scroll-list__item">name 32</li>
<li class="scroll-list__item">name 33</li>
<li class="scroll-list__item">name 34</li>
<li class="scroll-list__item">name 35</li>
<li class="scroll-list__item">name 36</li>
<li class="scroll-list__item">name 37</li>
<li class="scroll-list__item">name 38</li>
<li class="scroll-list__item">name 39</li>
<li class="scroll-list__item">name 40</li>
</ul>
</div>
答案 1 :(得分:0)
您可以使用少量的html / css
body {
font-family: arial, sans-serif;
}
.mobileList {
background-color: #efefef;
width: 20rem;
height: 40rem;
overflow: hidden;
}
.header {
background-color: #f6f6f6;
margin: 0;
padding: 2rem;
text-transform: uppercase;
}
.content {
display: block;
list-style-type: none;
overflow-y: scroll;
height: 100%;
padding: 0 0 8rem 0;
margin: 0;
}
.item {
padding: 1rem;
border-bottom: 1px solid #cccccc;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background: #666;
border-radius : 25px;
}
::-webkit-scrollbar-track {
background: #fff;
border : 2px solid #ccc;
border-radius : 25px;
}
.parent{
display: flex;
padding: 10px;
}
.children{ padding: 0 20px }
h2{margin: 10px 0 5px;font-weight : 500;}
h3{ margin : 0;font-weight: 500; color: #666; }
<div class="mobileList">
<h2 class="header">70 people going</h2>
<ul class="content">
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
<li class="item">
<div class="parent">
<img src="https://www.yourfirstpatient.com/assets/default-user-avatar-thumbnail@2x-ad6390912469759cda3106088905fa5bfbadc41532fbaa28237209b1aa976fc9.png" alt="avatar" width="80" height="80">
<div class="children">
<h2>Name </h2>
<h3>address</h3>
</div>
</div>
</li>
</ul>
</div>