JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="sidebar">

  <div id="scrollable">
    <div id="fixed">
      position:fixed
    </div>
    Scrolling content
    <br>
    <br>
    <br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
    <br>
    <br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?
    <br>
    <br>
    <br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
    <br>
    <br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?
    <br>
    <br>
    <br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
    <br>
    <br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?
    <br>
    <br>
    <br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
    <br>
    <br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?


  </div>
</div>

CSS

div.sidebar {
  background: #fff;
  width: 100%;
}

div#scrollable {
  overflow-y: auto;
  height: 200px;
}

div#fixed {
  background: #76a7dc;
  color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 50px;
  /* width: 100%; */
}

JavaScript

var fixedElement = document.querySelector('#fixed');

function getScrollBarWidth() {
  // создадим элемент с прокруткой
  var div = document.createElement('div');

  div.style.overflowY = 'scroll';
  div.style.width = '50px';
  div.style.height = '50px';

  // при display:none размеры нельзя узнать
  // нужно, чтобы элемент был видим,
  // visibility:hidden - можно, т.к. сохраняет геометрию
  div.style.visibility = 'hidden';

  document.body.appendChild(div);
  var scrollWidth = div.offsetWidth - div.clientWidth;
  document.body.removeChild(div);
  
  return scrollWidth;
}

fixedElement.style.right = getScrollBarWidth() + 'px';