如果滚动条可见，则滚动内容答案

【问题标题】：If scrollbars are visible, scroll the content如果滚动条可见，则滚动内容
【发布时间】：2015-10-19 07:38:38
【问题描述】：

我有一个固定大小的 div，可以动态显示内容。

如果内容对于 div 来说太大了，我希望让 div 的内容自己开始滚动，以便可以看到所有内容。

现成的解决方案似乎强制内容始终滚动，无论它是否适合 div。

谢谢。

【问题讨论】：

您是否尝试过使用溢出：自动？一段 sn-p 代码可以帮助您进一步获得帮助。
标记：出现滚动条，这不是预期的结果。我希望内容通过 JS/etc 在其上滚动
@ironchefbadass 你的意思是让内容自动来回滚动？你到底想让它做什么？
你想扩展 div 而不是滚动？
如果您正在寻求 JS 解决方案，这个逻辑应该让您开始：stackoverflow.com/a/7668692/4035952

标签： javascript html css user-interface user-experience

【解决方案1】：

除了Shahar提到的，你可以使用jQuery animate api滚动到div的底部。

var dynamicDiv = $("#dynamic_div");
scrollHeight= dynamicDiv[0].scrollHeight;
divHeight = dynamicDiv.height();

if(scrollHeight > divHeight){
    pageScrolls = scrollHeight/divHeight;
    $("#dynamic_div").animate({
    scrollTop: scrollHeight // scroll till the end of the div
    }, 1500 * pageScrolls); // adjust the time based on how much scrolling needs to be done
}

这是jsfiddle

【讨论】：

我怎样才能让它无休止地滚动......这是完美的，因为它是基本的，我只需要它循环......谢谢=）

【解决方案2】：

如果您没有覆盖浏览器默认样式的 css 规则，那么当元素内的内容溢出时，滚动条可能会自动出现。

你可以使用 javascript 来测试内容是否溢出，如果溢出，做任何你想做的事情（添加滚动条，改变样式，使用 jquery 插件等等）。

使用 jQuery：

var myDiv = $('#overflowing-div');
if (myDiv[0].scrollHeight > myDiv[0].clientHeight) {
    // handle this
}

根据此答案检查容器是否溢出： How to detect overflow in div element?

【讨论】：