Pure css scroll shadows
<p>I have a requirement to enable scroll shadows when content exceeds the available width. This I am trying to achieve with pure css(no JS). I came across to many articles and can achieve with css multi backgrounds and background-attachment. Working fine with the below jsfilldle code if the content is of type text, in the buttons case backgrounds are behind the buttons. So visually that doesn't work.</p>

<p>Expected behaviour:</p>

<p><a href="https://i.stack.imgur.com/x1PRL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/x1PRL.png" alt="enter image description here"></a></p>

<p>Scenario A: should enable shadow only at right side as scroll bar is at extreme left  </p>

<p>Scenario B: should enable both the shadow right &amp; left side as scroll bar is at middle as moved a part from left  </p>

<p>Scenario C: should enable shadow only at left side as scroll bar is at extreme right.</p>

<p>Ex: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; &amp; CSS gradients
 * Degrades gracefully
 */

html {
  background: white;
  font: 120% sans-serif;
}
.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 200px;
  margin: 50px auto;
  background:
  /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
  /* Shadows */
  radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background:
  /* Shadow covers */
  linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%,
  /* Shadows */
  radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  /* Opera doesn't support this in the shorthand */
  background-attachment: local, local, scroll, scroll;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;CSS-only shadow-scrolling effect.&lt;/h1&gt;
&lt;div class="scrollbox"&gt;
  &lt;ul&gt;
    &lt;li&gt;Ah! Scroll below!&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Button&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Button&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Button&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;&lt;button&gt;Button&lt;/button&gt;&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
    &lt;li&gt;7&lt;/li&gt;
    &lt;li&gt;8&lt;/li&gt;
    &lt;li&gt;9&lt;/li&gt;
    &lt;li&gt;10&lt;/li&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
    &lt;li&gt;7&lt;/li&gt;
    &lt;li&gt;8&lt;/li&gt;
    &lt;li&gt;9&lt;/li&gt;
    &lt;li&gt;10&lt;/li&gt;
    &lt;li&gt;1&lt;/li&gt;
    &lt;li&gt;2&lt;/li&gt;
    &lt;li&gt;3&lt;/li&gt;
    &lt;li&gt;4&lt;/li&gt;
    &lt;li&gt;5&lt;/li&gt;
    &lt;li&gt;6&lt;/li&gt;
    &lt;li&gt;7&lt;/li&gt;
    &lt;li&gt;8&lt;/li&gt;
    &lt;li&gt;The end!&lt;/li&gt;
    &lt;li&gt;No shadow there.&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>