为了账号安全,请及时绑定邮箱和手机立即绑定

当外部div的大小发生变化时,可滚动的div会停留在底部

/ 猿问

当外部div的大小发生变化时,可滚动的div会停留在底部

这是一个聊天应用示例->

http://img1.mukewang.com/5da135a20001375805970571.jpg

这里的想法是.messages-container尽可能多地占用屏幕。在中.messages-container,.scroll保存消息列表,如果有更多消息,则滚动屏幕大小。


现在,考虑这种情况:


用户滚动到对话的底部

的.text-input,动态地变大

现在,文本输入增加,而不是用户一直滚动到对话的底部,他们不再看到底部。


解决该问题的一种方法,如果我们使用react,请计算文本输入的高度,如果有任何变化,请让.messages-container知道


componentDidUpdate() {

  window.setTimeout(_ => {

    const newHeight = this.calcHeight();

    if (newHeight !== this._oldHeight) {

      this.props.onResize();

    }

    this._oldHeight = newHeight;

  });

}

但是,这会导致明显的性能问题,这是可悲的围绕传递消息是这样的。


有没有更好的办法?我可以这样使用css来表示,当.text-input- shift upincreas 增加时,我基本上想要所有.messages-container


查看完整描述

3 回答

?
慕姐829404

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-direction: column-reverse;是IE / Edge / Firefox中的错误,滚动条未显示,您可以在这里阅读更多信息:Flexbox列反转和Firefox / IE中的溢出


有利的一面是,您在移动设备/平板电脑上拥有约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));

}

在下面的代码片段中,我从上面添加了2个功能,以使IE / Edge / Firefox行为相同flex-direction: column-reverse;。


显示代码段


旁注1:该检测方法尚未完全测试,但应在较新的浏览器上运行。


旁注2:为聊天输入附加一个调整大小事件处理程序可能比调用updateScroll函数更有效。


注意:感谢HaZardouS重用其html结构


查看完整回答
反对 回复 2019-10-12
?
郎朗坤

您只需要一个CSS规则集:


.messages-container, .scroll {transform: scale(1,-1);}

就是这样,您完成了!


工作原理:首先,垂直翻转容器元素,使顶部变为底部(为我们提供所需的滚动方向),然后翻转内容元素,以使消息不会上下颠倒。


这种方法适用于所有现代浏览器。但是,它确实有一个奇怪的副作用:当您在消息框中使用鼠标滚轮时,滚动方向将反转。可以用几行JavaScript修复此问题,如下所示。


这是一个演示和小提琴玩:


//Reverse wheel direction

document.querySelector('.messages-container').addEventListener('wheel', function(e) {

  if(e.deltaY) {

    e.preventDefault();

    e.currentTarget.scrollTop -= parseFloat(getComputedStyle(e.currentTarget).getPropertyValue('font-size')) * (e.deltaY < 0 ? -1 : 1) * 2;

  }

});


//The rest of the JS just handles the test buttons and is not part of the solution

send = function() {

  var inp = document.querySelector('.text-input');

  document.querySelector('.scroll').insertAdjacentHTML('beforeend', '<p>' + inp.value);

  inp.value = '';

  inp.focus();

}

resize = function() {

  var inp = document.querySelector('.text-input');

  inp.style.height = inp.style.height === '50%' ? null : '50%';

}

html,body {height: 100%;margin: 0;}

.conversation {

  display: flex;

  flex-direction: column;

  height: 100%;

}

.messages-container {

  flex-shrink: 10;

  height: 100%;

  overflow: auto;

}

.messages-container, .scroll {transform: scale(1,-1);}

.text-input {resize: vertical;}

<div class="conversation">

  <div class="messages-container">

    <div class="scroll">

      <p>Message 1<p>Message 2<p>Message 3<p>Message 4<p>Message 5

      <p>Message 6<p>Message 7<p>Message 8<p>Message 9<p>Message 10

    </div>

  </div>

  <textarea class="text-input" autofocus>Your message</textarea>

  <div>

    <button id="send" onclick="send();">Send input</button>

    <button id="resize" onclick="resize();">Resize input box</button>

  </div>

</div>


查看完整回答
反对 回复 2019-10-12
?
MMTTMM

请尝试以下小提琴-https: //jsfiddle.net/Hazardous/bypxg25c/。尽管小提琴目前正在使用jQuery来扩大/调整文本区域的大小,但问题的关键在于用于消息容器和输入容器类的与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;

}

flex.shrink值对于.messages-container设置为1,对于.input-container设置为0。这样可以确保在重新分配大小时缩小邮件容器。


查看完整回答
反对 回复 2019-10-12

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信