If scrollbars are visible, scroll the content

Question

I have a fixed size div that dynamically shows content.

Should the content be too large for the div what I'd like to happen is for the contents of the div to start scrolling on it's own so the all the content can be seen.

Off the shelf solutions seem to force content to always scroll regardless if it fits inside in the div.

Thank you.

Have you tried using overflow: auto ? A snippet of code would get you further along in getting some help. — Mark, Jul 28 '15 at 16:06
Mark: Scrollbars appear, that was not the intended result. I want the content to scroll on its on via JS/etc — ironchefbadass, Jul 28 '15 at 16:10
@ironchefbadass You mean for the content to scroll back and forth automatically? What exactly do you want it to do? — Maximillian Laumeister, Jul 28 '15 at 16:12
This logic should give you a start if you are seeking a JS solution: http://stackoverflow.com/a/7668692/4035952 — Mark, Jul 28 '15 at 16:14

score 1 · Answer 1 · edited May 23 '17 at 12:06

If you don't have css rules overriding your browser default styles, it's likely that scrollbars will appear automatically whenever there is overflowing content inside the element.

You can use javascript to test if the content overflows, and if it does, do whatever you want (add scrollbar, change style, use a jquery plugin for it etc...).

With jQuery:

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

Based on this answer to check if container is overflowing: How to detect overflow in div element?

score 1 · Answer 2 · answered Jul 28 '15 at 16:55

Adding to what Shahar mentioned, you can use jQuery animate api to scroll till the bottom of the 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
}

Here's the jsfiddle

How would I make it endlessly scroll... This is perfect in that it's basic, I just need it to loop... Thanks =) — ironchefbadass, Jul 28 '15 at 17:21

If scrollbars are visible, scroll the content

2 Answers2