When scrolling an item with a scroll bar, the area above, formed by the padding-top property, also scrolls. How can you make sure that there is always indentation between the top of the element and the content inside, even when scrolling? Here is an example:

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

After before with position: absolute also fails ...

  • Try to add some <div> with position absolute in the middle, and so that it is on top of the entire width, the height of 10 pixels z-index is greater than that of the diva. Of course, not how you wanted to do it, but it will hide that content at the top of the block - Іvan Turcan
  • @IvanTzurkan, I already wrote in the question that elements with position: absolute do not solve problems. Here is an example of this: jsfiddle.net/bgmt35hz/4 - nup
  • This div should not be in a block with scrolled, but higher, that is, you make a block with a position relative, the same size as a block with a scroll in which you insert the div about which I spoke and the block with scrolled. - Іvan Tsurkan
  • @IvanTsurkan, thanks, I will lay out the decision in the answer. - nup

2 answers 2

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; }

The only problem that remains to be solved in this case is the cross-browser computation of the scrollbar width. Then in width: calc(100% - 17px) value 17px needs to be replaced with the calculated one.

Here is a link to an example: https://jsfiddle.net/bgmt35hz/6/

PS Also, it is necessary to suffer a little with the padding , width and height values ​​of the scroll element, since there are problems with the positioning of the scroll bar relative to its external representation.

      .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>