Javascript 防止被下方的div撞击时div向上滚动？

我昨天问了，但解释得很糟糕，没有具体说明我对纯CSS解决方案的需求，我认为这应该是可能的，所以我再次尝试

基本上，我有一个问题，我有一个可滚动的消息div和它下面的输入字段。当我点击一个按钮时，我希望输入字段被放大100像素，而不需要消息的div滚动

如您所见，当您单击“添加边距”按钮时，messages div也会向上滚动。我希望它留在原来的地方。类似地，如果您稍微向上滚动，因此只能看到倒数第二条消息，则单击按钮时同样应保留该位置

有趣的是，这种行为“有时”会被保留下来。例如，在某些情况下（我不能完全推断），滚动位置会保留。我只希望它能始终如一地这样做

window.onload=函数（e）{
document.querySelector（“.messages”）.scrollTop=10000；
};
功能测试（）{
document.querySelector（“.send message”）.classList.toggle（“一些边距”）；
}

.container{
宽度：400px；
高度：300px；
边框：1px实心#333；
显示器：flex；
弯曲方向：立柱；
}
.留言{
溢出y：自动；
身高：100%；
}
.发送消息{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
1.留点余地{
边缘底部：100px；
}

你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
添加页边距（Addmargin）

滚动条的正常行为是将其置于顶部，因此当您在页面加载时将其设置为底部时，您必须自己维护它，因为当下面的内容推动它时，div scroll将移到顶部

所以我有两个解决方案：

反转messages div中的消息，使最后一条消息成为第一条消息，使滚动条始终位于顶部

我创建了一个javascript函数来滚动到任何元素的底部，所以只要想滚动到底部就可以调用它

检查代码段

var elem=document.querySelector（“.messages”）；
window.onload=函数（e）{
滚动底部（elem）；
}
功能测试（）{
document.querySelector（“.send message”）.classList.toggle（“一些边距”）；
滚动底部（elem）；
}
功能滚动底部（e）
{
e、 scrollTop=e.clientHeight；
}

.container{
宽度：400px；
高度：300px；
边框：1px实心#333；
显示器：flex；
弯曲方向：立柱；
}
.留言{
溢出y：自动；
身高：100%；
}
.发送消息{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
1.留点余地{
边缘底部：100px；
}

你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
添加边距

你可以用另一种方法，通过将高度赋予

.messages

而不是赋予

.container

在这种情况下，它不会影响消息

div

，但如果将高度赋予

.container

它将推送div，因为边距位于具有高度的主div内

检查此代码段

功能测试（）{
document.querySelector（“.send message”）.classList.toggle（“一些边距”）；
}

.container{
宽度：400px；
边框：1px实心#333；
显示器：flex；
弯曲方向：立柱；
}
.留言{
高度：300px；
溢出y：自动；
}
.发送消息{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
1.留点余地{
边缘底部：50px；
}

你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
添加边距

这是一个有趣的解决方案，您可能会喜欢

我们对div的了解是，它只保留滚动条的顶部位置，因此如果由于任何原因导致高度改变，滚动条将保持不变，这就是问题的原因

作为解决方法，您可以使用

变换将
.messages
翻转180度：旋转（180度）scaleX（-1）

并向后翻转

.message

以取消翻转内容，然后div将自动保持底部滚动条（位于顶部）

功能测试（）{
document.querySelector（“.send message”）.classList.toggle（“一些边距”）
}

.container{
宽度：400px；
高度：300px；
边框：1px实心#333；
显示器：flex；
弯曲方向：立柱；
}
.留言{
溢出y：自动；
身高：100%；
变换：旋转（180度）scaleX（-1）；
}
消息
{
变换：旋转（180度）scaleX（-1）；
}
.发送消息{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
}
1.留点余地{
边缘底部：100px；
}

你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
添加边距

简单的解决方法是将上一个

滚动顶部

设置为打开切换。在这里，我用来存储以前的

scrollTop

值，您也可以使用变量

window.onload=函数（e）{
document.querySelector（“.messages”）.scrollTop=10000；
}
功能测试（）{
让state=document.querySelector（“.send message”）.classList.toggle（“一些边距”）
设div=document.querySelector（“.messages”）；
如果（州）{
div.dataset.top=div.scrollTop；
div.scrollTop+=100//与某些页边距的页边距底部相同
}否则{
function scrollbottom(e)
    {
      e.scrollTop = e.clientHeight;
    }

.some-margin{margin-bottom:100px;}

.messages{margin-top:-100px;}

componentDidMount() {
  this.screenHeight = window.innerHeight;

  let chatElem = document.querySelector(".conversations-chat");

  window.addEventListener('resize', () => {
    let diff = this.screenHeight - window.innerHeight;

    chatElem.scrollTop += diff;

    this.screenHeight = window.innerHeight;      
  });
}

<script>
    window.onload = function(e){ 
    document.querySelector(".messages").scrollTop = 10000;
}

function test() {
    document.querySelector(".send-message").classList.toggle("some-margin")
            document.querySelector(".messages").scrollTop = 10000;
}
    </script>