Thiết kế website giá rẻ

Question

I created an example in which i need to add margin (top and bottom) to the scrollbar.

NOTE: I need to solve the problem without changing default style of the scrollbar.

In the example below, the arrows indicate where the scrollbar should start and end.

body {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     padding: 0;
     margin: 0;
}
 .phone {
     width: 370px;
     height: 750px;
     border: 10px solid #222;
     border-radius: 80px;
     position: relative;
}
 .phone--custom-scrollbar .content::-webkit-scrollbar {
     width: 8px;
}
 .phone--custom-scrollbar .content::-webkit-scrollbar-track {
     background: #777;
     margin-top: 100px;
     margin-bottom: 80px;
}
 .phone--custom-scrollbar .content::-webkit-scrollbar-thumb {
     background: #222;
}
 .content {
     height: 100%;
     overflow-y: auto;
     border-radius: 70px;
}
 .items {
     padding: 120px 20px 100px 20px;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     column-gap: 10px;
     row-gap: 20px;
}
 .item {
     height: 100px;
     background: #222;
     border-radius: 8px;
}
 .head {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 100px;
     backdrop-filter: blur(5px);
     border-radius: 70px 70px 0 0;
}
 .foot {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 80px;
     backdrop-filter: blur(5px);
     border-radius: 0 0 70px 70px;
}
 .button {
     position: absolute;
     background: #222;
     width: 10px;
     border: none;
     border-radius: 10px;
     outline: none;
     padding: 0;
     margin: 0;
}
 .button--action {
     top: 140px;
     left: -14px;
     height: 40px;
}
 .button--volume-up {
     top: 220px;
     left: -14px;
     height: 60px;
}
 .button--volume-down {
     top: calc(220px + 10px + 60px);
     left: -14px;
     height: 60px;
}
 .button--lock {
     top: calc(220px + 20px);
     right: -14px;
     height: 100px;
}
 .arrow {
     position: absolute;
     right: -50px;
}
 .arrow--start {
     top: 85px;
}
 .arrow--end {
     bottom: 65px;
}

<div class="phone">
  <div class="phone__content content">
    <div class="items">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>

  <div class="head"></div>
  <div class="foot"></div>

  <button type="button" class="button button--action"></button>
  <button type="button" class="button button--volume-up"></button>
  <button type="button" class="button button--volume-down"></button>
  <button type="button" class="button button--lock"></button>

  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-left-short arrow arrow--start" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-left-short arrow arrow--end" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/>
  </svg>
</div>

If we add ::-webkit-scrollbar-track top margin margin-top: 100px; and bottom margin margin-bottom: 80px; then it will work only when we add width: 8px; to ::-webkit-scrollbar and some colors so that it is visible – and this changed the standard scroll bar.

Below is an example with a modified scrollbar. In this example, the scrollbar position is done correctly, but the standard style has changed

body {
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     padding: 0;
     margin: 0;
}
 .phone {
     width: 370px;
     height: 750px;
     border: 10px solid #222;
     border-radius: 80px;
     position: relative;
}
 .phone--custom-scrollbar .content::-webkit-scrollbar {
     width: 8px;
}
 .phone--custom-scrollbar .content::-webkit-scrollbar-track {
     background: #777;
     margin-top: 100px;
     margin-bottom: 80px;
}
 .phone--custom-scrollbar .content::-webkit-scrollbar-thumb {
     background: #222;
}
 .content {
     height: 100%;
     overflow-y: auto;
     border-radius: 70px;
}
 .items {
     padding: 120px 20px 100px 20px;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     column-gap: 10px;
     row-gap: 20px;
}
 .item {
     height: 100px;
     background: #222;
     border-radius: 8px;
}
 .head {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 100px;
     backdrop-filter: blur(5px);
     border-radius: 70px 70px 0 0;
}
 .foot {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 80px;
     backdrop-filter: blur(5px);
     border-radius: 0 0 70px 70px;
}
 .button {
     position: absolute;
     background: #222;
     width: 10px;
     border: none;
     border-radius: 10px;
     outline: none;
     padding: 0;
     margin: 0;
}
 .button--action {
     top: 140px;
     left: -14px;
     height: 40px;
}
 .button--volume-up {
     top: 220px;
     left: -14px;
     height: 60px;
}
 .button--volume-down {
     top: calc(220px + 10px + 60px);
     left: -14px;
     height: 60px;
}
 .button--lock {
     top: calc(220px + 20px);
     right: -14px;
     height: 100px;
}
 .arrow {
     position: absolute;
     right: -50px;
}
 .arrow--start {
     top: 85px;
}
 .arrow--end {
     bottom: 65px;
}

<div class="phone phone--custom-scrollbar">
  <div class="phone__content content">
    <div class="items">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>

  <div class="head"></div>
  <div class="foot"></div>

  <button type="button" class="button button--action"></button>
  <button type="button" class="button button--volume-up"></button>
  <button type="button" class="button button--volume-down"></button>
  <button type="button" class="button button--lock"></button>

  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-left-short arrow arrow--start" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/>
  </svg>

  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-left-short arrow arrow--end" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/>
  </svg>
</div>

Most likely, this problem can be solved in another way, for example, by combining with nested blocks or something like that.

Thiết kế website giá rẻ

Danh mục

How to add margin to scrollbar without changing its default style