隐藏垂直滚动条

Question

我想隐藏左侧面板中的垂直滚动条，同时保持它们可滚动。

编辑：Webkit涵盖。现在正在寻找Mozilla Firefox的修复

我查看过以前问题的答案，例如this一个和that一个，效果不佳。大多数情况下，它们会破坏布局，导致overlaps，或者它们不会产生任何明显的结果。

浏览器发展迅速，所以我希望获得更新的信息。

跨浏览器解决方案会很棒，但我对任何指针感到满意！

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>