css溢出:滚动.从底部开始

css overflow: scroll. start from the bottom

本文关键字：底部 开始 滚动 溢出 css      更新时间：2023-09-26

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

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

如果我从来没有折叠小部件，就像我用widget.toggle('blind')（JQuery）做的那样，我可以在页面加载时用javascript滚动：然而，使用.scrollTop()，我希望小部件最初被折叠。在折叠的小部件上使用.scrollTop()没有效果！此外，每当我折叠/展开小部件时，它都会一直滚动到顶部。

有图书馆吗？或者你有解决这个问题的提示吗？

你可以这样做：

  1. 默认情况下，声明您的聊天视图（小部件）最小化高度（在我的示例中为5vh）
  2. 当用户想要打开聊天视图时（在我的示例中单击），您添加类（在我示例中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>

相关文章：