Javascript 当外部div的大小发生变化时,可滚动div粘贴到底部
下面是一个聊天应用程序示例-> 这里的想法是让Javascript 当外部div的大小发生变化时,可滚动div粘贴到底部,javascript,css,reactjs,flexbox,Javascript,Css,Reactjs,Flexbox,下面是一个聊天应用程序示例-> 这里的想法是让.messages容器占据尽可能多的屏幕空间。在.messages container中,.scroll保存消息列表,如果消息多于屏幕大小,则滚动 现在,考虑这个例子: 用户滚动到对话的底部 .text输入,动态地变大 现在,用户不再滚动到对话的底部,而是文本输入增加,他们不再看到底部 一种解决方法是,如果我们使用react,计算文本输入的高度,如果有任何变化,请通知.messages容器 componentDidUpdate() { wind
.messages容器
占据尽可能多的屏幕空间。在.messages container
中,.scroll
保存消息列表,如果消息多于屏幕大小,则滚动
现在,考虑这个例子:
.text输入
,动态地变大componentDidUpdate() {
window.setTimeout(_ => {
const newHeight = this.calcHeight();
if (newHeight !== this._oldHeight) {
this.props.onResize();
}
this._oldHeight = newHeight;
});
}
但是,这会导致明显的性能问题,像这样传递消息是令人悲哀的
有更好的办法吗?我可以这样使用css来表示当.text输入增加时,我想本质上向上移动所有.messages容器请尝试以下方法-。尽管fiddle目前正在使用jQuery来增加/调整文本区域的大小,但关键在于用于messages容器和input容器类的flex相关样式-
.messages-container{
order:1;
flex:0.9 1 auto;
overflow-y:auto;
display:flex;
flex-direction:row;
flex-wrap:nowrap;
justify-content:flex-start;
align-items:stretch;
align-content:stretch;
}
.input-container{
order:2;
flex:0.1 0 auto;
}
对于.messages容器,flex收缩值设置为1;对于.input容器,flex收缩值设置为0。这确保了邮件容器在重新分配大小时缩小。2:此答案的第二次修订版 你的朋友在这里是
flex-direction:column-reverse
在对齐消息容器底部的消息时,您所要求的全部内容都由它来完成,就像Skype和许多其他聊天应用程序所做的那样
.chat-window{
display:flex;
flex-direction:column;
height:100%;
}
.chat-messages{
flex: 1;
height:100%;
overflow: auto;
display: flex;
flex-direction: column-reverse;
}
.chat-input { border-top: 1px solid #999; padding: 20px 5px }
.chat-input-text { width: 60%; min-height: 40px; max-width: 60%; }
flex方向的下方:柱反向
是IE/Edge/Firefox中的一个bug,其中没有显示滚动条,您可以在此处阅读更多信息:
好处是,您在手机/平板电脑上有约90%的浏览器支持,在桌面电脑上有约65%的浏览器支持,而且随着缺陷得到修复,…还有一个解决办法
// scroll to bottom
function updateScroll(el){
el.scrollTop = el.scrollHeight;
}
// only shift-up if at bottom
function scrollAtBottom(el){
return (el.scrollTop + 5 >= (el.scrollHeight - el.offsetHeight));
}
在下面的代码片段中,我添加了上面的两个函数,以使IE/Edge/Firefox以相同的方式运行flex-direction:column-reverse代码>可以
函数addContent(){
var msgdiv=document.getElementById('messages');
var msgtxt=document.getElementById('inputs');
var atbottom=scrollAtBottom(msgdiv);
如果(msgtxt.value.length>0){
msgdiv.innerHTML+=msgtxt.value+'
';
msgtxt.value=“”;
}否则{
msgdiv.innerHTML++='Long Long content'+(tempCounter++)+'!
;
}
/*如果位于底部,则为IE/Edge/Firefox*/
if(在底部和(!isWebkit | | isEdge)){
更新滚动(msgdiv);
}
}
函数resizeInput(){
var msgdiv=document.getElementById('messages');
var msgtxt=document.getElementById('inputs');
var atbottom=scrollAtBottom(msgdiv);
如果(msgtxt.style.height='120px'){
msgtxt.style.height='auto';
}否则{
msgtxt.style.height='120px';
}
/*如果位于底部,则为IE/Edge/Firefox*/
if(在底部和(!isWebkit | | isEdge)){
更新滚动(msgdiv);
}
}
/*修复IE/Edge/Firefox*/
var isWebkit=('webkiteappearance'在document.documentElement.style中);
var isEdge=(-ms accelerator在document.documentElement.style中);
var-tempCounter=6;
函数更新滚动(el){
el.scrollTop=el.scrollHeight;
}
功能滚动底部(el){
返回(el.scrollTop+5>=(el.scrollHeight-el.offsetHeight));
}
html,正文{高度:100%;边距:0;填充:0;}
.聊天窗口{
显示器:flex;
弯曲方向:立柱;
身高:100%;
}
.聊天信息{
弹性:1;
身高:100%;
溢出:自动;
显示器:flex;
弯曲方向:柱反向;
}
.chat输入{边框顶部:1px实心#999;填充:20px 5px}
.chat输入文本{宽度:60%;最小高度:40px;最大宽度:60%;}
/*临时工。演示按钮*/
按钮{宽度:12%;高度:44px;左边距:5%;垂直对齐:顶部;}
/*开始-修复IE/Edge/Firefox中隐藏的滚动条*/
.聊天信息文本{溢出:自动;}
@媒体屏幕和(-webkit最小设备像素比:0){
.chat消息文本{溢出:可见;}
/*重置边缘,因为它将自己标识为webkit*/
@支持(-ms accelerator:true){.chat messages text{overflow:auto;}
}
/*隐藏调整大小FF*/
@-moz文档url-prefix(){.chat输入文本{resize:none}
/*结束-修复IE/Edge/Firefox*中隐藏的滚动条*/
长内容1
长内容2
长龙内容3
长内容4
长内容5
加味精
调整输入大小
我已将文本输入
移动到消息
中,将其绝对定位到容器底部,并为消息
提供足够的底部填充空间
运行一些代码将类添加到对话
,使用漂亮的CSS转换动画更改文本输入
的高度和消息
的底部填充
JavaScript在运行CSS转换的同时运行“scrollTo”函数,以使滚动保持在底部
当滚动条再次从底部脱落时,我们将该类从对话中删除
希望这有帮助
var doscolcollcheck=true;
var objConv=document.querySelector('.conversation');
var objMessages=document.querySelector('.messages');
var objInput=document.querySelector('.text input');
函数滚动到(元素、到、持续时间){
如果(持续时间您只需要一个CSS规则集:
.messages-container, .scroll {transform: scale(1,-1);}
就这样,你完了
工作原理:首先,它垂直翻转容器元素,使顶部成为底部(为我们提供所需的滚动方向),然后翻转内容元素,使消息不会颠倒
var innerWidth = window.innerWidth
var innerHeight = window.innerHeight
OR FOR REACT
this.setState({width: window.innerWidth, height: window.innerHeight})
flex-grow: 1;
flex-basis: 0;