1

I have a div where content is appended periodically to it via query's append(). As the content gets longer, it will eventually overflow the div. I want no scrollbars to appear when overflowed, but still have the content scroll up to show the new content below.

Is this possible? When I use overflow-x: hidden no scrollbar appears but the content is hidden.

3 Answers 3

3

If the size of the container is fixed, you could place the content inside an absolutely positioned wrap like so:

<div class="container">
    <div class="wrap">
        <p>bah</p>
    </div>
</div>

and css:

.container {
    y-overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}

.wrap {position:absolute; bottom: 0; left:0;right:0;
}

http://jsfiddle.net/sXGd9/

0

append() will add to content at the end. You may want to prepend() new content, so the data get added before the old content.

As for overflow, you can set it to scroll so that scrollbars appear if necessary, or hidden so no scrollbars will appear but the content won't be visible. Otherwise you can set it to visible so it will be visible but the scrollbars won't appear.

Do you want the overflowed content to be visible? If so set the overflow: visible otherwise set overflow: hidden (because you don't want scrollbars). Anyway with this you wan't be able to scroll the content. If you need to scroll you have to build your own scroll system, adding event handler to your container.

0

If you have each appended content in your "#container" div wrapped in a seperate ".append" div you can do something like:

var pos = $('#container div:last').position();
$('#container').scrollTop(pos.top);

Is this helpfull?

Other solutions can be found in earlier post: How do I scroll a row of a table into view (element.scrollintoView) using jQuery?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.