Проблемы с полосой прокрутки в div с фиксированным заголовком - PullRequest
Новая
       58

Проблемы с полосой прокрутки в div с фиксированным заголовком

0 голосов
/ 30 мая 2018

Теперь я создаю страницу, которая содержит div с фиксированной высотой и полосой прокрутки.К сожалению, этот div также имеет фиксированный заголовок.Проблема в том, что фиксированный заголовок перекрывает полосу прокрутки, так что невозможно использовать щелчок полосы прокрутки правой частью фиксированного заголовка.Возможные обходные пути для такой проблемы:

1) пользовательская полоса прокрутки определенной ширины

2) простой обработчик изменения размера, который обновляет фиксированную ширину заголовка, делая ее равной ширине блока .content.

Но эти обходные пути требуют JS.

Могу ли я решить проблему в чистом CSS?

Чтобы прояснить ситуацию, я привожу пример такой проблемы в песочнице.

Спасибо!

CODEPEN: https://codepen.io/anon/pen/GGRVRP

Вот мойкод:

HTML: 

<div class="container">
  <div class="header">Fixed header, long enough to demonstrate that scrollbar can't be triggered by clicking on header</div>
  <div class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, eum sapiente non, natus et, ullam unde odio quos quo blanditiis aspernatur minus quas? Architecto enim iure itaque reiciendis cupiditate, et consequatur natus praesentium aspernatur voluptas illum odit eius distinctio doloribus animi iusto, repudiandae, maiores sint laudantium id unde veritatis! Suscipit odio obcaecati possimus nisi culpa autem deleniti dolores inventore commodi ex sed consectetur modi cupiditate eveniet, omnis repellendus placeat ab iste fuga harum esse quod enim excepturi minus? Similique, alias est doloremque deserunt tempora dolore delectus, eligendi veritatis ipsum, dolorum tenetur id quod cum rerum vero amet tempore laborum nam.</div>
</div>

CSS: 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 500px;
  padding-top: 100px;
  overflow: auto;
  background-color: coral;
}

.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  height: 100px;
  padding: 10px 0;
  background-color: violet;
  text-align: center;
  font-weight: bold;
}

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Вам необходимо компенсировать заголовок, добавляя поле top, а не padding.И у тебя не будет проблем. 

.container {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 400px;
  margin-top: 100px;
  overflow: auto;
  background-color: coral;
}

https://codepen.io/draganradu/pen/BVyBpW

0 голосов
/ 30 мая 2018

Используйте положение: липкое может вам помочь 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  position: relative;
  z-index: 1;
  width: 240px;
  height: 500px;
  padding-top: 0px;
  overflow: auto;
  background-color: coral;
}

.header {
  position: sticky;
  left: 0;
  top: 0;
  width: 224px;
  height: 100px;
  padding: 10px 0;
  background-color: violet;
  text-align: center;
  font-weight: bold;
}
<div class="container">
  <div class="header">Fixed header, long enough to demonstrate that scrollbar can't be triggered by clicking on header</div>
  <div class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, eum sapiente non, natus et, ullam unde odio quos quo blanditiis aspernatur minus quas? Architecto enim iure itaque reiciendis cupiditate, et consequatur natus praesentium aspernatur voluptas illum odit eius distinctio doloribus animi iusto, repudiandae, maiores sint laudantium id unde veritatis! Suscipit odio obcaecati possimus nisi culpa autem deleniti dolores inventore commodi ex sed consectetur modi cupiditate eveniet, omnis repellendus placeat ab iste fuga harum esse quod enim excepturi minus? Similique, alias est doloremque deserunt tempora dolore delectus, eligendi veritatis ipsum, dolorum tenetur id quod cum rerum vero amet tempore laborum nam.</div>
</div>
...