Transparent scrollbar

Reserve space for scroll bar even it is hidden

by ycharniauski

HTML

<div id='container' >
  <div id='header'>
    Header. 
  </div>  
  <div id='content' contenteditable=true>
    Put cursor here and type some text to increase div size
  </div>
  <div id='header'>
    Footer
  </div>  
</div>

CSS

:root{
  --body-bg:  #F5F5F5;
}

#container {
  white-space: pre-wrap;
  margin: 0;
  width: 100%;
  flex: 1;
  flex-direction: column;
  width: 100%;
  display: flex;
}

#header {
  background-color: #CCC;
  min-height: 50px;
}

#footer {
  background-color: #CCC;
  min-height: 50px;
}

#content {
  flex: 1;
}

#content:focus {
  outline: none;
}

body {
  padding: 0;
  margin: 0;
	float: left;
	background: var(--body-bg);
	overflow-y: scroll;
  display: flex;
  width: 100%;
  height: 100vh;
}


.body-transparent-scrollbar::-webkit-scrollbar
{
  /* or background: transparent; */
  width: 0;
  background: var(--body-bg); 
}

.body-transparent-scrollbar::-webkit-scrollbar-track
{
   /* or background: transparent; */
	 background: var(--body-bg);
}

JavaScript

const TRANSPARENT_SCROLLBAR_CLASS = 'body-transparent-scrollbar'

function makeTransparentScrollbar() {
  /*
    don't use this example in your solution as is 
    using setInterval is not the best idea, you can use resize event    
  */
  const { body } = document
  const { clientHeight, scrollHeight } = body
  const overflow = scrollHeight > clientHeight
  
  if (overflow) {
    body.classList.remove(TRANSPARENT_SCROLLBAR_CLASS)  
  } else if (!overflow) {
    body.classList.add(TRANSPARENT_SCROLLBAR_CLASS)  
  }
}

makeTransparentScrollbar()
setInterval(makeTransparentScrollbar, 200)