javascript - css overflow : scroll. 从底部开始

Question

我正在构建一个聊天小部件，它默认最小化(折叠并固定在页面底部)，然后在单击时最大化。

它有一个固定的高度，overflow-y: scroll。我希望滚动条从底部开始并向上滚动，但这是非常有问题的。

如果我从不折叠小部件，我使用 widget.toggle('blind') (JQuery)，我可以在页面加载时使用 javascript 简单地滚动:使用 .scrollTop( )，但是，我希望小部件最初是折叠的。在折叠的小部件上使用 .scrollTop() 没有任何效果!此外，每当我折叠/展开小部件时，它都会一直滚动到顶部。

是否有图书馆或您有一些解决此问题的提示？

Answer 1

你可以这样做:

1. 默认声明您的 chatView(小部件)最小高度(在我的示例中为 5vh)
2. 当用户想要打开 chatView(在我的示例中单击)时，您添加类(在我的示例中为 open)并增加它的高度(在我的示例中为 90vh) .使用过渡属性 - 您可以获得想要的动画。
3. 使用提到的 jQuery 方法 .scrollTop 和所需的容器高度(在我的示例中为 #chatView>div)，以确保它滚动到底部。

$(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>