What type of this element?

Question

Does anyone know the kind of html-element or library which support to build a similar one.

Unless OP is looking for a way to customise the scrollbar. In which case there's plenty of plugins like this one: https://kingsora.github.io/OverlayScrollbars/. This question is still off-topic though as "Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow" — Matt, Feb 26 '19 at 09:11

score 0 · Accepted Answer · answered Feb 26 '19 at 09:31

You can do this with this little amount of html/css :). I did not add a picture but if you like it can be added. Also if you want you can modify the scrollbar to a custom as matt mentions in his comment. To be honest with the scrollbar, it's not worth the extra load of an external js library to do.

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

@GigaBite - it looks like [your edit](https://stackoverflow.com/review/suggested-edits/22310903) substantially changes this answer. Did you mean to post your own, separate answer? — Wai Ha Lee, Feb 26 '19 at 10:21
@WaiHaLee No. I meant to give the requested answer with matching UI. So, if someone with the same query came to see the answer, they'll get exactly what they need. — Monkey D. Luffy, Feb 26 '19 at 10:26
@GigaBite I would disagree with your edit for two reasons: a) It *does* substantially change the answer given and accepted. b) you've added "Happy Coding ☻" to the end of the answer - greetings and 'fluff' [should be removed from answers, not added](https://meta.stackexchange.com/q/2950/284827). If another reviewer also rejects your edit you could take it up on [meta](https://meta.stackoverflow.com/) if you think we're wrong. — Wai Ha Lee, Feb 26 '19 at 10:35
Ohk. I agree with part **b** not **a**. Still, I'll post separately. @WaiHaLee — Monkey D. Luffy, Feb 26 '19 at 10:38
@GigaBite You should never edit an answer to modify somebody else code in a way that it would change it, in your case it would. Fixing typos, missing a `;` ect is ok. — Dejan.S, Feb 26 '19 at 11:15
The edit is being discussed on meta [here](https://meta.stackoverflow.com/q/380647/1364007). — Wai Ha Lee, Feb 26 '19 at 11:20

score 0 · Answer 2 · answered Feb 26 '19 at 10:42

You can do this with this little amount of 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>

The answer should address that the scrollbar modification does not apply cross browser. https://caniuse.com/#search=scrollbar — Dejan.S, Feb 26 '19 at 11:18

What type of this element?

2 Answers2