БЛОГ НА HUSL


Как добавить отступы для scrollbar'a не изменяя его стандартный вид

Автор вопроса: Виталик Дубайский

Что бы было более понятно - я создал пример в котором нужно сверху-снизу добавить отступы в scrollbar.

ПРИМЕЧАНИЕ: мне нужно решить проблему не изменяя внешний вид scrollbar'a.

В примере ниже стрелки указывают где должен начинаться и заканчиваться scrollbar.

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>

Если добавить к ::-webkit-scrollbar-track отступ сверху margin-top: 100px; и снизу margin-bottom: 80px; то это заработает только тогда, когда мы добавим width: 8px; к ::-webkit-scrollbar и некоторые цвета, что бы его было видно - а это в свою очередь изменяет стандартный вид scrollbar'a и мне не подходит.

Вот пример с измененным scrollbar. В этом примере позиция scrollbar'a сделана так как надо, но изменился его стандартный вид:

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>

UPD: если запустить мой код, то можно заметить что я пытаюсь сделать так, что бы контент который прокручивается - как бы выходил за рамки своего блока (что в принципе невозможно сделать, именно поэтому я и решил использовать в scrollbar отступы сверху-снизу чтобы создать как бы иллюзию того, что он выходит за свои рамки, только вот проблема в том, что этого скорее всего нельзя сделать не изменяя стандартный вид scrollbar).

Скорее всего эту проблему можно решить другим способом, например, комбинируя с вложенными блоками или что то в этом роде, но пока что мне этого не удалось сделать.


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.