JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<scroll-wrapper>
  <div id="wrapper">
    <div class="slim-scroll">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt risus eros, non fermentum quam lacinia eu. In nec nibh ipsum. Nunc sollicitudin lectus sed leo euismod, sed tincidunt nunc eleifend. Nunc sed nunc felis. Nunc dolor metus, luctus
      in aliquet sit amet, congue sed lacus. Cras pellentesque nisl quis quam vehicula, eget fermentum metus luctus. Vestibulum eget arcu eget nisl volutpat tincidunt. Maecenas pharetra ex ex, sit amet eleifend leo hendrerit ac. Nulla sed tristique quam.
      Aliquam quis nisi sit amet mi hendrerit eleifend a feugiat neque. Suspendisse tincidunt auctor dui, quis convallis eros bibendum in. Donec dui ex, sollicitudin quis tristique a, interdum nec nibh. Duis mattis, leo eget consectetur mollis, enim tellus
      imperdiet ante, eu viverra felis ante scelerisque velit. Integer sit amet tincidunt lectus. Nulla hendrerit lectus est, a mattis augue cursus et. Praesent sit amet nunc lorem. Etiam sollicitudin ut neque a ultrices. Phasellus vel nulla mauris. Donec
      malesuada porta dui. Praesent mi augue, laoreet nec consectetur nec, tincidunt in erat. Aliquam laoreet vel dolor et mattis. Fusce eu augue ut felis posuere auctor.
    </div>
  </div>

  <scroll-error>
    <div class="slim-scroll">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tincidunt risus eros, non fermentum quam lacinia eu. In nec nibh ipsum. Nunc sollicitudin lectus sed leo euismod, sed tincidunt nunc eleifend. Nunc sed nunc felis. Nunc dolor metus, luctus
      in aliquet sit amet, congue sed lacus. Cras pellentesque nisl quis quam vehicula, eget fermentum metus luctus. Vestibulum eget arcu eget nisl volutpat tincidunt. Maecenas pharetra ex ex, sit amet eleifend leo hendrerit ac. Nulla sed tristique quam.
      Aliquam quis nisi sit amet mi hendrerit eleifend a feugiat neque. Suspendisse tincidunt auctor dui, quis convallis eros bibendum in. Donec dui...

CSS

#wrapper {
  display: flex;
  overflow: hidden;
}

.slim-scroll {
  flex: 1;
  overflow-y: overlay !important;
  padding-right: calc(8px * 1.5);
}

.slim-scroll::-webkit-scrollbar-track {}

.slim-scroll:hover::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
  background: grey;
}

.slim-scroll::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  background: none;
  -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
}

.slim-scroll::-webkit-scrollbar-thumb {
  background: black;
}

.slim-scroll:hover::-webkit-scrollbar-thumb {
  background: red;
}

#onTop {
  background: green;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50px;
}

JavaScript

class ScrollWrapper
  extends HTMLElement {

  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const slot = document.createElement('slot');
    shadow.appendChild(slot);
    
    const style = document.createElement('style');
    style.innerHTML = `
:host { 
  display: grid;
  grid-gap: 8px;
  grid-template-columns: 1fr 1fr;
  position: relative;
  height: 150px;
  overflow: hidden;
}`;
    shadow.appendChild(style);
  }
}

class ScrollError
  extends HTMLElement {
  
  constructor() {
    super();
    
    const shadow = this.attachShadow({mode: 'open'});
    const slot = document.createElement('slot');
    shadow.appendChild(slot);
    
    const style = document.createElement('style');
    style.innerHTML = `
:host { 
	flex: 1; 
 	display: flex; 
  overflow: hidden; 
} ` +
    document.querySelector('style').innerHTML;
    shadow.appendChild(style);
  }
}

customElements.define('scroll-wrapper', ScrollWrapper);
customElements.define('scroll-error', ScrollError);