css overflow: scroll. start from the bottom

Question

I am building a chat widget, which is minimized (collapsed and fixed to bottom of page) by default and then maximized when clicked.

It has a fixed height, and overflow-y: scroll. I want the scrollbar to start at the bottom and scroll upwards, but this is prettry problematic.

If I never collapse the widget, which I do with widget.toggle('blind') (JQuery), I can simply scroll with javascript on page load: using .scrollTop(), however, I want the widget to initially be collapsed. Using .scrollTop() on the collapsed widget has no effect! Furthermore, whenever I collapse/expand the widget, it scrolls all the way to the top.

Is there a library or do you have some hints to solve this?

This seems related: stackoverflow.com/questions/14426780/… — Paul Redmond
– Paul Redmond, Commented Dec 9, 2015 at 14:24
indeed.. this is exactly it. But it doesn't work, when the widget is collapsed (overflowing box is hidden, i.e. height=0). So I'm looking for an alternative or something I've overlooked — Eldamir
– Eldamir, Commented Dec 9, 2015 at 14:28
Could you tie a JS event into collapsing/expanding the widget so it can scroll to bottom? — Paul Redmond
– Paul Redmond, Commented Dec 9, 2015 at 14:29
yea @PaulRedmond, I attached it as a callback widget.toggle('blind', function(){/* scroll here */}). Thanks for the hint — Eldamir
– Eldamir, Commented Dec 10, 2015 at 7:54

Marina · Accepted Answer · 2015-12-10 09:33:37Z

You can do it like this:

Declare your chatView (widget) minimized height (5vh in my example) by default
When user wants to open the chatView (click in my example), you adding class (open in my example) and increase it's height (90vh in my example). With transition property - you get wanted animation.
Use mentioned jQuery method .scrollTop with needed container height (#chatView>div in my example), which insures it scroll to the bottom.

$(function(){
	$("#chatView").click(function(){
            $(this).toggleClass("open").scrollTop($("#chatView>div").height());
        });
});

		*{
			margin:0;
		}
		footer{
			height:10vh;
			position: absolute;
			bottom: 0;
		}
		#chatView{
			width: 20vw;
			background:red;
			position:absolute;
			bottom:0;
			height:4vh;
			transition: height 1s;
			overflow-y:scroll;
		}
		#chatView.open{
			height: 90vh;
		}
		#chatView>div{
			background:green;
			height: 95vh;
		}
		#chatView>figure{
			height: 4vh;
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer>
  <div id="chatView" >
    <figure></figure>
    <div ></div>
  </div>
</footer>

Collectives™ on Stack Overflow

css overflow: scroll. start from the bottom

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related