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

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

出于封装原因，我扩展了Element。从微观回答。

/*
 * isOverflowing
 * 
 * Checks to see if the element has overflowing content
 * 
 * @returns {}
 */
Element.prototype.isOverflowing = function(){
    return this.scrollHeight > this.clientHeight || this.scrollWidth > this.clientWidth;
}

像这样使用它

let elementInQuestion = document.getElementById("id_selector");

    if(elementInQuestion.isOverflowing()){
        // do something
    }

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

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

下面是一个使用带有overflow:hidden和JQuery height()的包装器div来确定元素是否已溢出的方法，以测量包装器和内部内容div之间的差异。

outers.each(function () {
    var inner_h = $(this).find('.inner').height();
    console.log(inner_h);
    var outer_h = $(this).height();
    console.log(outer_h);
    var overflowed = (inner_h > outer_h) ? true : false;
    console.log("overflowed = ", overflowed);
});

来源:jsfiddle.net上的框架和扩展

jquery的替代答案是使用[0]键来访问原始元素，如:

if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){

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