I want to enable scroll shadows when content exceeds the available width. This I am trying to achieve with pure CSS (no JS). Using a technique I found in various articles, I can achieve my goal with multiple CSS backgrounds and background-attachment .
The below code is working fine if the content is text only. However, in the case of buttons, the shadow backgrounds get displayed behind the buttons. How can I display these shadows above the buttons?

Expected behavior:

Scenario A: enable shadow only at right side, as scroll bar is at extreme left
Scenario B: enable shadows on both right & left side, as scroll bar is somewhere in the middle
Scenario C: enable shadow only at left side, as scroll bar is at extreme right

Example:

/**
 * Scrolling shadows by @kizmarh and @leaverou
 * Only works in browsers supporting background-attachment: local; & CSS gradients
 * Degrades gracefully
 */

html {
  background: white;
  font: 120% sans-serif;
}
.scrollbox {
  overflow: auto;
  width: 200px;
  max-height: 160px;
  margin: 0 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;
}

<div class="scrollbox">
  <ul>
    <li>Ah! Scroll below!</li>
    <li><button>Button</button></li>
    <li><button>Button</button></li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li><button>Button</button></li>
    <li><button>Button</button></li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>The end!</li>
    <li>No shadow there.</li>
  </ul>
</div>