2

При прокрутке элемента с полосой прокрутки область сверху, образуемая свойством padding-top, также, прокручивается. Каким образом можно сделать, чтобы между верхней частью элемента и контентом внутри, даже при прокрутке, всегда был отступ? Вот пример:

div {
  width: 300px;
  height: 200px;
  padding-top: 10px;
  border: 1px dotted black;
  overflow: auto;
}
<div>Творчество любого поэта всегда уникально, особенно гениального. Марина Ивановна Цветаева, безусловно, относится к числу последних. Как и под чьим влиянием сформировался ее талант, что было главным в ее поэзии, какая философия лежит в основе ее творчества?
  Цветаева очень глубокий поэт, сложный и многоплановый. Ее стихи сразу можно узнать по тому, как поэт обращается с языком: она слушает его, проговаривает один и тот же смысл разными словами и звуками, всматривается и вчитывается в каждое слово.</div>

Через before с position: absolute тоже не получается...

4
  • Попробуй добавить всередине какой то <div> с position absolute, и чтобы он был сверху по всей ширине высота 10 пикселей z-index больше чем у дива. конечно не то как Вы хотели сделать, но он спрячет тот контент вверху блока Commented 19 февр. 2016 в 0:09
  • @ІванЦуркан, я уже писал в вопросе, что элементы с position: absolute не решают проблемы. Вот пример этого: jsfiddle.net/bgmt35hz/4
    – nup
    Commented 19 февр. 2016 в 9:23
  • Этот див должен быть не в блоке со скролом, а выше, то есть, ты делаешь блок с position relative, таких же размеров, как блок со скролом в котором вставляешь тот див, о котором я говорил и блок со скролом. Commented 19 февр. 2016 в 10:08
  • @ІванЦуркан, спасибо, решение выложу в ответе.
    – nup
    Commented 19 февр. 2016 в 10:39

2 ответа 2

1

HTML:

<div class = "wrapper">
    <div class = "scroll">Текст</div>
</div>

CSS:

.wrapper {
  width: 300px;
  height: 200px;
  position: relative;
  border: 1px dotted black;
}
.scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.scroll:before, .scroll:after {
  content: '';
  background-color: #f3f5f6;
  width: calc(100% - 17px);
  height: 10px;
  left: 0px;
  top: 0px;
  position: absolute;
}
.scroll:after {
  top: auto;
  bottom: 0px;
}

Единственная проблема, которую остается решить в данном случае, - кроссбраузерное вычисление ширины scrollbar'а. Тогда в width: calc(100% - 17px) значение 17px нужно заменить на вычисленное.

Вот ссылка на пример: https://jsfiddle.net/bgmt35hz/6/

P.S. Также, немного придется помучиться со значениями padding, width и height у элемента scroll, так как есть проблемы с позиционированием полосы прокрутки относительно его внешнего представления.

0

 .top {

   position: relative;

   display: block;

   height: 50px;

   margin-bottom: 10px!important;

   background: red;

 }

 div {

   width: 300px;

   height: 200px;

   padding-top: 10px;

   border: 0px;

   overflow: auto;

 }
<div class="top"></div>
<div>Творчество любого поэта всегда уникально, особенно гениального. Марина Ивановна Цветаева, безусловно, относится к числу последних. Как и под чьим влиянием сформировался ее талант, что было главным в ее поэзии, какая философия лежит в основе ее творчества?
  Цветаева очень глубокий поэт, сложный и многоплановый. Ее стихи сразу можно узнать по тому, как поэт обращается с языком: она слушает его, проговаривает один и тот же смысл разными словами и звуками, всматривается и вчитывается в каждое слово.</div>

3

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.