如果您只想显示更多内容的标识符，那么您可以使用纯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/。

像http://jsfiddle.net/Skooljester/jWRRA/1/这样的代码有用吗?它只是检查内容的高度，并将其与容器的高度进行比较。如果大于，则可以在代码中添加“显示更多”按钮。

更新:增加了在容器顶部创建“Show More”按钮的代码。

我做了一个多部分的代码依赖演示上述答案(例如使用溢出隐藏和高度)，以及如何展开/折叠溢出项

例1:https://codepen.io/Kagerjay/pen/rraKLB(真正简单的例子，没有javascript，只是剪辑溢出项)

示例2:https://codepen.io/Kagerjay/pen/LBErJL(单个事件处理程序在溢出项上显示更多/无显示)

例3:https://codepen.io/Kagerjay/pen/MBYBoJ(多事件处理程序对溢出项显示更多/显示更少)

我在下面附上了例子3，我使用Jade/Pug，所以它可能有点啰嗦。我建议检查一下我已经使其更容易掌握的相互依赖。

// Overflow boolean checker function isOverflown(element){ return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } // Jquery Toggle Text Plugin $.fn.toggleText = function(t1, t2){ if (this.text() == t1) this.text(t2); else this.text(t1); return this; }; // Toggle Overflow function toggleOverflow(e){ e.target.parentElement.classList.toggle("grid-parent--showall"); $(e.target).toggleText("Show More", "Show LESS"); } // Where stuff happens var parents = document.querySelectorAll(".grid-parent"); parents.forEach(parent => { if(isOverflown(parent)){ parent.lastElementChild.classList.add("btn-show"); parent.lastElementChild.addEventListener('click', toggleOverflow); } }) body { background-color: #EEF0ED; margin-bottom: 300px; } .grid-parent { margin: 20px; width: 250px; background-color: lightgrey; display: flex; flex-wrap: wrap; overflow: hidden; max-height: 100px; position: relative; } .grid-parent--showall { max-height: none; } .grid-item { background-color: blue; width: 50px; height: 50px; box-sizing: border-box; border: 1px solid red; } .grid-item:nth-of-type(even) { background-color: lightblue; } .btn-expand { display: none; z-index: 3; position: absolute; right: 0px; bottom: 0px; padding: 3px; background-color: red; color: white; } .btn-show { display: block; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <p>Any grid-parent over 10 child items has a "SHOW MORE" button to expand</p> <p>Click "SHOW MORE" to see the results</p> </section> <radio></radio> <div class="wrapper"> <h3>5 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>8 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>10 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>13 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>16 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>19 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> </div>

比较元素。scrollHeight到元素。clientHeight应该做这个任务。

下面是来自MDN解释Element的图片。scrollHeight和Element.clientHeight。

setTimeout(function(){
    isOverflowed(element)           
},500)

function isOverflowed(element){
    return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

这对我来说很管用。谢谢你！

使用js检查孩子的offsetHeight是否大于父母..如果是，使父溢出滚动/隐藏/自动你想要的，并在更多div上显示:block ..