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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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