Question

我正在构建一个聊天窗口小部件，默认情况下最小化（折叠并固定到页面底部），然后在单击时最大化。

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

如果我从未崩溃小部件，我使用widget.toggle('blind')（JQuery），我只需在页面加载时使用javascript滚动：使用.scrollTop()，但是，我希望小部件最初被折叠。在折叠的小部件上使用.scrollTop()无效！此外，每当我折叠/展开小部件时，它都会一直滚动到顶部。

是否有图书馆，或者您是否有一些提示可以解决这个问题？

Answer 1

你可以这样做：

默认声明您的chatView（小部件）最小化高度（在我的示例中为 5vh ）
当用户想要打开chatView时（在我的示例中单击），您添加了类（在我的示例中为打开）并增加了它的高度（在我的示例中为 90vh ）。使用过渡属性 - 你得到想要的动画。
使用提到的jQuery方法.scrollTop和所需的容器高度（在我的示例中＃chatView＆gt; 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>

css溢出：滚动。从底部开始

1 个答案: