<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam sequi beatae exercitationem et, sint voluptas earum dolor quisquam quas accusantium delectus enim fugit corrupti recusandae fugiat doloremque iusto possimus vitae.</p>
<p>Inventore facilis neque ea ab quasi incidunt, qui debitis soluta, deserunt odit error, sunt minima! Ipsam, odit omnis laudantium repellendus dolorum earum veritatis repudiandae ex accusantium ab nostrum consequuntur asperiores?</p>
<div class="side-scroll">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<p>Cum distinctio ipsum dignissimos nihil amet ullam inventore, sapiente dicta doloribus ad eos esse ipsa dolores dolorem quasi sed numquam porro quod architecto reprehenderit error, molestiae blanditiis. Alias, a ad.</p>
<p>Repellat, sunt adipisci. Maiores sapiente placeat deserunt consequuntur, commodi illo, praesentium eius repudiandae sint, soluta doloremque aspernatur? Reiciendis nesciunt ducimus excepturi nemo recusandae maiores, voluptas cum, doloremque assumenda repellendus officiis.</p>
<p>Quis rerum repellat, ducimus possimus quae necessitatibus ratione ipsa, assumenda nihil non nisi. Hic harum modi alias ipsam quisquam quo necessitatibus odio, consectetur doloribus animi placeat repellat, dolores ad laudantium?</p>
<p>Odit, doloribus? Modi iste, autem reiciendis fugit mollitia labore ex eaque laborum maiores earum, laboriosam perspiciatis cum enim assumenda vel ratione dolore soluta ducimus? Dolorum illo itaque numquam porro aliquid?</p>
<p>Enim consequuntur soluta repellendus asperiores rerum amet fugit iusto sapiente molestiae voluptate! Sequi distinctio, autem reprehenderit nulla maiores odio rem error non sed debitis necessitatibus eum, dicta aut quo magnam.</p>
<p>Tempora architecto voluptatibus dolorum qui, animi adipisci quidem culpa natus eos? Vel fuga voluptas voluptatum, sequi culpa id explicabo sit tenetur alias, voluptatibus modi cupiditate similique aliquid distinctio exercitationem quidem.</p>
<p>Reprehenderit optio, dolorem, deserunt beatae ipsam, possimus porro dolore nisi error rerum sed omnis officia ratione consequuntur. Expedita dolorem ratione laudantium aliquid? Autem dignissimos quidem sequi amet ratione cumque itaque?</p>
<p>Ad aspernatur repellat, ducimus voluptate distinctio reiciendis, excepturi expedita nam tenetur, iusto consequuntur sed nisi qui error. Nam odio laborum iure quos ex sequi dolor, deserunt neque enim incidunt rem.</p>
<p>Voluptatibus vel laboriosam amet aliquam fuga earum reprehenderit rem exercitationem, nihil iste dolorum cum molestias nam consequuntur illo dicta ea accusantium excepturi eveniet? Atque deleniti autem fugit, harum ea neque.</p>
<p>Consequatur cum ratione quis perferendis, fuga laborum laudantium distinctio. Cumque quibusdam quis consectetur, officia molestiae maiores quia dolor iure cum perferendis quam provident sed fugit nostrum! Nulla nesciunt sed veritatis.</p>
<p>Est doloremque dolorum, fugit quo nulla sit! Officia vero assumenda illum a atque fuga animi veniam quidem laborum qui, eaque sunt hic odio modi accusantium nemo. Quae perspiciatis mollitia qui.</p>
<p>Temporibus corporis beatae nobis, architecto distinctio cumque soluta a ab, dicta placeat, aspernatur dolor est reiciendis officia fugit vero? Assumenda explicabo at dolore nobis saepe ducimus ad nisi molestias unde!</p>
<p>Porro fugit exercitationem iure rerum nihil necessitatibus, ipsam nulla inventore nostrum deserunt beatae maiores. Rem ullam fugiat impedit expedita beatae, assumenda quasi magni error in, reiciendis eum non pariatur! Unde!</p>
<p>Neque fuga eum nulla reprehenderit? Atque, minima! Harum incidunt nihil nesciunt illo et. Natus eum officia, tempora perferendis eos tempore rem. Ea, blanditiis? Voluptatum laborum repellendus nihil rerum totam doloribus!</p>
<p>Laborum suscipit, fugiat a quis ad ea maxime accusamus illo animi reiciendis ipsum obcaecati explicabo quod enim, quae possimus ex modi. Odit hic impedit possimus dolor doloribus esse quis architecto!</p>
<p>Facilis nihil amet atque vero recusandae, ipsum doloremque impedit suscipit quae ea similique excepturi iure quibusdam architecto, repellat autem aperiam voluptatem. Illum vitae est dolore perspiciatis sequi nemo a accusamus.</p>
<p>Assumenda, nostrum molestias voluptatem eligendi aut vel blanditiis alias fugiat fuga laborum quae rem rerum magni hic nesciunt velit. Placeat reiciendis ullam commodi atque minima cumque iusto dicta? Nam, laborum!</p>
<p>Deleniti, esse ab! Alias omnis consectetur unde quos, aliquid doloremque eos blanditiis culpa vel explicabo perferendis labore quis porro tempore qui suscipit. Dignissimos dolorem consequatur, pariatur eum ab quia fuga.</p>
body {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  font: 16px/1.4 system-ui;
}

:root {
  --shadow: #43a047;
  --scrollbarBG: #eee;
  --thumbBG: #66bb6a;
}
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  box-shadow: 0 -100vh 0 100vh var(--shadow), 0 0 15px 5px black;
}

/* Standard stuff, if you care to do that.
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
} */

.side-scroll {
  display: flex;
  overflow: auto;
  padding-bottom: 5px;
}
.side-scroll > div {
  flex: 1;
  margin-right: 20px;
  flex: 0 0 100px;
  height: 100px;
  background: #ccc;
}
.side-scroll::-webkit-scrollbar-thumb:horizontal {
  background-color: var(--thumbBG);
  box-shadow: -100vh 0 0 100vh var(--shadow), 0 0 15px 5px black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.