Hide vertical scrollbar

Question

I’d like to hide the vertical scroll-bars in the left panels, while keeping them scrollable.

Edit: Webkit covered. Now looking for a fix for Mozilla Firefox

I’ve looked at answers from previous questions, such as this one and that one, with poor results. Mostly they mess up the layout, causing overlaps, or they don’t produce any noticeable result.

Browsers evolve rapidly so I was hoping for updated information.

A cross-browser solution would be awesome, but I’d be happy with any pointers!

jsfiddle

const lijntjes = [
  "Random sentences go here, one at a time!",
  "Here's another one! Just keep adding them on.",
  "Look, here's another one.",
  "And yet another. Along with dozens of others."
];

const lorIps = el => {
  for (let n = 0; n < 15; n++) {
    el.innerHTML += ' ' + lijntjes.join(' ').toString()
  };
};

const teksten = document.querySelectorAll('.tekst');
const po1 = document.querySelectorAll('.project-omschrijving.row-1');
const po2 = document.querySelectorAll('.project-omschrijving.row-2');
const om = document.querySelectorAll('.omschrijving');
const o = document.querySelectorAll('.open');
const c = document.querySelectorAll('.close');

// Populate
Array.from(teksten, item => lorIps(item));

// Toggler
const toggler = (el, klassen) => klassen.map(klas => el.classList.toggle(klas));

// Open
const open = elmt => {
  Array.from(elmt, item => item.addEventListener('click', function() {
    let hoofdNodes = document.querySelectorAll('.' + this.parentNode.parentNode.classList.value.split(' ').join(
      '.').replace('.omschrijving', ''))
    Array.from(hoofdNodes, el => toggler(el, ['trans', 'binnen']));
  }));
}

// Close
const dicht = elmt => {
  Array.from(elmt, item => item.addEventListener('click', function() {
    let hoofdNodes = document.querySelectorAll('.' + this.parentNode.parentNode.classList.value.split(
      ' ').join(
      '.').replace('.omschrijving', ''));
    Array.from(hoofdNodes, el => setTimeout(() => toggler(el, ['trans']), 200));
    Array.from(hoofdNodes, el => toggler(el, ['binnen']))
  }))
}

window.onload = function() {
  open(o);
  dicht(c);
  o[0].click()
}

:root {
  --offset: 50vw;
  --cell-hoogte: 50vh;
  --gap: '1em';
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 12px;
}

a {
  text-decoration: none;
  color: palegreen;
}

:target {
  border-radius: 1em;
  background-color: palegreen;
  transition: background-color .3s ease-in-out
}

:target> :nth-child(2) {
  color: #fff;
  transition: color .3s ease-in-out
}

.container {
  color: green;
  font-size: 2em;
  font-weight: bold;
  display: grid;
  grid-template-columns: var(--offset) 100vw;
  grid-template-rows: repeat(2, var(--cell-hoogte));
  grid-gap: var(--gap);
  overflow: hidden;
}

@media (max-width: 700px) {
  .container {
    grid-template-columns: 50vw 100vw;
    grid-template-rows: repeat(2, calc(var(--cell-hoogte)*1));
    grid-gap: 0;
  }
}

p {
  /* Viewport Sized Typography */
  /* https://css-tricks.com/viewport-sized-typography/ */
  font-size: 3.5vmin;
}

p a {
  display: block;
  transition: background .3s ease-in-out
}

#note {
  position: fixed;
  bottom: 1em;
  right: 1em;
  display: flex;
  align-self: flex-end;
}

.omschrijving {
  opacity: .5;
}

.trans {
  transition: all .2s ease-out;
}

.project-omschrijving {
  will-change: transform, opacity;
  padding: 1em;
  transform: translateX(calc(var(--offset)*-1));
  overflow: hidden;
}

.project-omschrijving:nth-child(odd) {
  overflow-y: auto;
}

.binnen {
  transform: translateX(0);
  transition: all .3s ease-out;
  opacity: 1
}

.knop {
  display: flex;
  flex-direction: column;
}

.open,
.close {
  position: absolute;
  top: 1em;
  right: 0;
  width: 4em;
  height: auto;
  cursor: pointer;
  stroke: green;
  fill: green;
  stroke-miterlimit: 10;
  object-fit: contain;
}

.close {
  transform: rotate(45deg)
}

<div class="container">
  <p id="anchor1" class="project-omschrijving omschrijving row-1">
    <span class='anchor'>Anchor 1</span>
    <a href="#anchor3">To anchor3</a>
    <span class="knop">
        <a class="close">
          <svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
            <line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" />
            <line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" transform="translate(50) rotate(90)" />
          </svg>
        </a>
      </span>
    <span class="tekst"></span>
  </p>
  <p id="anchor2" class="project-omschrijving row-1">
    <span class='anchor'>Anchor 2</span>
    <a href="#anchor4">To anchor4</a>
    <span class="knop">
        <a class="open">
          <svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
            <circle cx="25" cy="25" r="25" />
          </svg>
        </a>
      </span>
    <span class="tekst"></span>
  </p>
  <p id="anchor3" class="project-omschrijving omschrijving row-2">
    <span class='anchor'>Anchor 3</span>
    <a href="#anchor1">To anchor1</a>
    <span class="knop">
        <a class="close">
          <svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
            <line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" />
            <line x1="0" x2="50" y1="25" y2="25" stroke-width="5px" stroke-linecap="square" transform="translate(50) rotate(90)" />
          </svg>
        </a>
      </span>
    <span class="tekst"></span>
  </p>
  <p id="anchor4" class="project-omschrijving row-2">
    <span class='anchor'>Anchor 4</span>
    <a href="#anchor2">To anchor2</a>
    <span class="knop">
        <a class="open">
          <svg class="checkmark" viewBox="-5 -5 115 115" xmlns="http://www.w3.org/2000/svg">
            <circle cx="25" cy="25" r="25" />
          </svg>
        </a>
      </span>
    <span class="tekst"></span>
  </p>
</div>
<div id="note"> Internet Explorer 8 and earlier versions do not support the :target selector.</div>