CSS не позволяет горизонтальной полосе прокрутки отталкивать содержимое - PullRequest
Новая
       45

CSS не позволяет горизонтальной полосе прокрутки отталкивать содержимое

1 голос
/ 23 июня 2019

Я разработал собственную горизонтальную полосу прокрутки, которая появляется при наведении контейнера.Мой SCSS: 

.container {
  width: 600px;
  /* the height cannot be fixed */
  overflow-y: hidden;
  overflow-x: hidden;
  &:hover, &:focus {
    overflow-x: auto;
    /*Scroll bar nav*/
    &::-webkit-scrollbar {
      height: 10px;
    }               
    /* Track */
    &::-webkit-scrollbar-track {
      background: #fafafa;   
    }
    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;;  
    }
    /* hover effect for scrollbar thumb */
    &::-webkit-scrollbar-thumb:hover   {
      background-color: #7c7b7c;
    }
  }
}

.content {
  width: 1200px;
}

Работает нормально, но когда появляется полоса прокрутки, она выталкивает содержимое под ней.Как сделать так, чтобы полоса прокрутки появлялась внутри контейнера, не выдвигая содержимое?

Я пытался: 

::-webkit-scrollbar { position: absolute; }

или 

::-webkit-scrollbar { position: fixed; }

, но это не работает.Я настроил кодовый блок для демонстрации:

https://codepen.io/anon/pen/OemWgR

Примечание: Контейнер не может иметь фиксированную высоту.

Ответы [ 2 ]

1 голос
/ 24 июня 2019

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

.container {
  width: 600px;
  /* the height cannot be fixed */
  overflow-y: hidden;
  overflow-x: auto;
  /*Scroll bar nav*/
  &::-webkit-scrollbar {
    height: 10px;
  } 
  &:hover, &:focus {                    
    /* Track */
    &::-webkit-scrollbar-track {
      background: #fafafa;   
    }
    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #c1c1c1;;  
    }
    /* hover effect for scrollbar thumb */
    &::-webkit-scrollbar-thumb:hover   {
      background-color: #7c7b7c;
    }
  }
}
0 голосов
/ 23 июня 2019

Изменить:

Если мы не можем установить высоту на фиксированное значение, мы также можем использовать jQuery или собственный JavaScript для динамического изменения высоты.

Например, с помощью jQuery: 

 $(() => {
    let h = $('.container').height() + 10 // plus the height of scrollbar
    $('.container').css({'height': h+'px'})
  })

Оригинальный ответ:

Задайте фиксированное значение высоты для контейнера, например, 100px, следующим образом: 

.container {
  width: 600px;
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;
  height: 100px;
}


$(() => {
  let h = $('.container').height() + 10 // plus the height of scrollbar
  $('.container').css({'height': h+'px'})
})
.container {
  width: 600px;
  position: relative;
  overflow-y: hidden;
  overflow-x: hidden;
  border: 2px solid teal;
}

.container:hover,
.container:focus {
  overflow-x: auto;
  /*Scroll bar nav*/
  /* Track */
}

.container::-webkit-scrollbar {
  height: 10px;
}

.container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background: #fafafa;
}


/* Handle */

.container::-webkit-scrollbar-thumb {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #c1c1c1;
  ;
}


/* hover effect for scrollbar thumb */

.container::-webkit-scrollbar-thumb:hover {
  background-color: teal;
}

.content {
  width: 1200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="content">
    <p>Vestibulum fringilla sit amet augue. Cras non dolor. Aenean ut eros et nisl sagittis vestibulum. Sed mollis, eros
      et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Cras varius. Vestibulum
      fringilla sit amet augue.
      Cras non dolor. Aenean ut eros et nisl sagittis vestibulum. Sed mollis, eros et ultrices tempus, mauris ipsum
      aliquam libero, non adipiscing dolor urna a orci. Cras varius.</p>
  </div>
</div>

<div>
  <p>This content is being pushed down by the scrollbar &#9785; &#9785; &#9785;</p>
</div>
...