<div id="root"></div>

@import url('https://fonts.googleapis.com/css2?family=Flow+Block&display=swap');

.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Opera */
}

.content {
  box-shadow: hsl(0 0% 0% / 0.25) 0 0.25em 0.5em;
  background: hsl(0 0% 100%);
  padding: 2em;
  margin-left: auto;
  margin-right: auto;
  max-width: 450px;
  max-height: 350px;
  overflow: scroll;
  scrollbar-gutter: stable both-edges;
}

button {
  padding: 10px 20px;
  margin-bottom: 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #0056b3;
}

.container {
  padding: 2em;
  display: grid;
  place-items: center;
  min-height: 80vh;
}

.mockup-font  {
  font-family: 'Flow Block', sans-serif;
}

.mockup-font p:not(:first-child):nth-child(2n) {
  color: hsl(250 40% 75%);
}

.mockup-font p:not(:first-child):nth-child(2n+1) {
  color: hsl(280 40% 75%);
}

import React, { useState, useRef, useEffect } from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'

function ScrollbarToggle() {
  const [showScrollbar, setShowScrollbar] = React.useState(true);

  return (
    <div className="container">
      <button onClick={() => setShowScrollbar(!showScrollbar)}>
        {showScrollbar ? 'Hide' : 'Show'} Scrollbar
      </button>
      
      <div className={`mockup-font content ${!showScrollbar ? 'hide-scrollbar' : ''}`}>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
        <p>Excepteur sint occaecat cupidatat non proident.</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
         <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
         <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
         <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  );
}

ReactDOM.render(<ScrollbarToggle />, document.getElementById('root'));