CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Eldamir
Eldamir

Reputation: 10062

css overflow: scroll. start from the bottom

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?

Upvotes: 2

Views: 3987

Answers (1)

Marina
Marina

Reputation: 794

You can do it like this:

  1. Declare your chatView (widget) minimized height (5vh in my example) by default
  2. 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.
  3. 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>

Upvotes: 3

Related Questions