Cross- Browser-Scroll

by Julien Etienne

HTML

<div data-scrollbar-cutoff>
  <div data-scrollbar>
    <span> want the user to know that an area iswefwefowehfowiehfoiwhefoiwhefoihweofihwefscrollable</span>
    <li>But in Lion the bar disappears</li>
    <li>The only way the user would know that</li>
    <li>they can scroll is if they make the scroll gesture</li>
    <li>Is there a way to keep the scrollbar present all the time?</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
    <li>Example</li>
  </div>
</div>

CSS

body {
  background: black;
  margin: 0;
}

[data-scrollbar] {
  background: white;
  margin: 0;
  padding: 0;
}

span{
  width: 100%;
  /* display: block; */
}

.webkit-scroll {
  overflow: auto;
  height: 60vh;
}

.webkit-scroll::-webkit-scrollbar {
  width: 12px;
  height: 8px;
}

.webkit-scroll::-webkit-scrollbar-track {
  background-color: #555;
  border-radius: 12px;
}

.webkit-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: #aaa;
}

.webkit-scroll::-webkit-scrollbar-corner {
  background-color: transparent;
}

JavaScript

const client = () => {
  const userAgent = navigator.userAgent;
  const vendor = navigator.vendor;
  const isChrome = /Chrome/.test(userAgent) && /Google Inc/.test(vendor);
  const isSafari = /Safari/.test(userAgent) && /Apple Computer/.test(vendor);
  const isWebkit = isChrome || isSafari;
  return {
    isChrome,
    isSafari,
    isWebkit
  }
}

////////////////////////////////////////////////////////////////

const evergreenScrollbar = ({
  scrollContainer,
  scrollbarWidth,
  scrollbarStyle,
  scrollTrackStyle,
  containerStyle,
  isWebkit,
  webkitClass
}) => {
  if (isWebkit) {
  	scrollContainer.classList.add(webkitClass);
    return;
  }
  Object.assign(scrollContainer.style, {
    width: `100%`,
    display: 'block',
    overflowY: 'scroll',
    position: 'relative'
  });
  const scrollBarCutoff = scrollContainer.parentElement;
  const outerWidth = scrollContainer.getBoundingClientRect().width;
  const innerWidth = scrollContainer.firstElementChild.getBoundingClientRect().width;
  const preScrollbarWidth = outerWidth - innerWidth;
  const newScrollbarWidth = preScrollbarWidth * scrollbarWidth;
  console.log(outerWidth, innerWidth)
  console.log(newScrollbarWidth)
  if (scrollBarCutoff && scrollBarCutoff.dataset.scrollbarCutoff === undefined) {
    throw Error(`${scrollBarCutoff} must contain data-scrollbar-cutoff`);
  }


  Object.assign(scrollBarCutoff.style, {
    overflow: 'hidden',
    position: 'relative'
  });



  const scrollbar = document.createElement('div');
  const scrollTrack = document.createElement('div');
  Object.assign(scrollTrack.style, {
    width: newScrollbarWidth + 'px',
    height: '100%',
    background: 'rgb(241,241,241)',
    position: 'absolute',
    right: '0',
    top: 0,
    pointerEvents: 'none',
    filter: 'hue-rotate(90deg)'
  }, scrollTrackStyle);

  Object.assign(scrollbar.style, {
    width: newScrollbarWidth + 'px',
    minHeight: '10px',
    background: 'rgb(193,193,193)',
    position: 'absolute',
    right:...