如果您只想显示更多内容的标识符，那么您可以使用纯 CSS 来做到这一点。我为此使用纯滚动阴影。诀窍是使用background-attachment: local;. 你的CSS看起来像这样：

.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;

}


<div class="scrollbox">

  <ul>

    <li>Not enough content to scroll</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

  </ul>

</div>





<div class="scrollbox">

  <ul>

    <li>Ah! Scroll below!</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

    <li>9</li>

    <li>10</li>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

    <li>The end!</li>

    <li>No shadow there.</li>

  </ul>

</div>

您可以在http://dabblet.com/gist/2462915上找到代码和示例

您可以在这里找到解释：http: //lea.verou.me/2012/04/background-attachment-
local/。