当它下面的 div 碰撞时,防止 div 向上滚动?

共11个回答, 标签: javascript html css scroll scrollbar

我问类似的问题昨天,但解释得很差,没有具体说明我对纯 CSS 解决方案的渴望,我认为这应该是可能的,所以我再次尝试。

基本上,我有一个问题,我有一个可滚动消息的 div 和下面的输入字段。当我点击一个按钮时,我希望输入字段增加 100 像素,而没有消息滚动的 div。

这是一个小提琴,展示了问题的全部

如您所见,当您单击 “添加边距” 按钮时,消息 div 也会向上滚动。我希望它留在原处。类似地,如果你稍微向上滚动,所以你只能看到倒数第二条消息,点击按钮同样会在点击时保留那个位置。

有趣的是,这种行为 “有时” 被保留了下来。例如,在某些情况下 (我不能完全推断) 滚动位置被保留。我只是希望它能始终如一地表现出来。

窗口.onload = 函数 (e) {
文档。查询选择器 (“。消息”)。scrollTop = 10000;
}

功能测试 () {
文档。查询选择器 (“”。发送消息 ”)。类列表。切换 (“ 一些边距 ”)
}
。容器
宽度: 400px;
高度: 300px;
边框: 1px 固体 #333;
显示: flex;
弯曲方向: 列;
}

。消息
溢出-y: 自动;
高度: 100%;
}

。发送消息
宽: 100%;
显示: flex;
弯曲方向: 列;
}

。若干-margin {
边缘底部: 100px;
}


你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好
你好






加法边距

enter image description here

第1个答案
    This is a funny solution that you might like.

我们对 div 的了解是,它只保留滚动条的顶部位置,所以如果高度因任何原因而改变,滚动条将保持不变,这就是导致你的问题的原因。

作为解决方法,您可以翻转.messages 180 degree using transform: rotate(180deg) scaleX(-1); and flip back the .message要取消翻转内容,div 将自动保持底部滚动条 (顶部)。

功能测试 () {
文档。查询选择器 (“”。发送消息 ”)。类列表。切换 (“ 一些边距 ”)
}
。容器
宽度: 400px;
高度: 300px;
边框: 1px 固体 #333;
显示: flex;
弯曲方向: 列;
}

。消息
溢出-y: 自动;
高度: 100%;
变换: 旋转 (180deg) scaleX (-1);
}
。报文
{
变换: 旋转 (180deg) scaleX (-1);
}
。发送消息
宽: 100%;
显示: flex;
弯曲方向: 列;
}
第2个答案
    The normal behavior of the scrollbar it to be on the top, so when you set it to the bottom on page load, you have to maintain it your self because when ever the below content pushed it then div scroll will move to the top.

所以我有两个解决方案给你:

  1. 反转 messages div 中的消息,因此最后一条消息将是第一条消息,因此滚动将始终在顶部。

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

函数 scrollbottom (e)
{
E.scrollTop = e.clientHeight;
}

检查代码片段

Var elem = 文档。查询选择器 (“。消息”);

窗口.onload = 函数 (e) {
Scrollbottom (elem);
}
功能测试 () {
文档。查询选择器 (“。发送消息”)。类列表。切换 (“一些边距”);
Scrollbottom (elem);
}
第3个答案
    You can do it the other way around, by giving the height to the .messages  instead of giving it to the .container in this case it will not affect the messages div but if you are giving it to the .container it will push your div because the margin is inside the main div which have a height.

检查此片段

功能测试 () {
文档。查询选择器 (“。发送消息”)。类列表。切换 (“一些边距”);
}
。容器
宽度: 400px;
边框: 1px 固体 #333;
显示: flex;
弯曲方向: 列;
}

。消息
高度: 300px;
溢出-y: 自动;
}
。发送消息
宽: 100%;
显示: flex;
弯曲方向: 列;
}
第4个答案
    The simple workaround is to set the previous scrollTop on toggle. Here I am using dataset to store previous scrollTop value, you can use variable either.
窗口.onload = 函数 (e) {
文档。查询选择器 (“。消息”)。scrollTop = 10000;
}

功能测试 () {
让状态 = 文档。查询选择器 (“。发送消息”)。类列表。切换 (“一些边距”)
让 div = document.querySelector (“。消息”);
第5个答案
    For now, a pure CSS approach that I can come up with is the following:
窗口.onload = 函数 (e) {
文档。查询选择器 (“。消息”)。scrollTop = 10000;
}

Document.querySelector ('button').addEventListener ('click',test)

然而,当有余量时,最上面的部分有一个小问题。这里的诀窍是使用负边距和使用翻译来 “向上滚动” (不是真正的滚动,只是一种错觉)wrapperDiv。

第6个答案
    There seems to be a problem with the js toggle function. I've changed it to a simple hide & show. Also I've added a width on the input tag. You also need to add a position: absolute on the send-message div and bottom: 0 so it stays at the bottom. then place postion: relative on the container so that the send message div stays within the container. This means that the message container won't affect the messages themselves and push them up.
窗口.onload = 函数 (e) {
文档。查询选择器 (“。消息”)。scrollTop = 10000;
}

功能测试 () {
Var x = 文档。查询选择器 (“。发送消息”);

如果 (x.style.display = "none") {
X.style.display = "block";
} Else {
X.style.display = "none";
}
} </Code> </pre>。容器
宽度: 400px;
高度: 300px;
边框: 1px 固体 #333;
显示: flex;
弯曲方向: 列;
位置: 相对;
}

。消息
溢出-y: 自动;
高度: 100%;
}

。发送消息
宽: 100%;
显示: flex;
弯曲方向: 列;
位置: 绝对;
底部: 0;
}
。发送消息输入
宽: 100%;
}
。若干-margin {
边缘底部: 100px;
}


        你好
        你好
        你好
        你好
        你好
        你好
        你好
        你好
        你好
        你好
        你好
        你好
        你好
        你好
        测试
        你好
        你好
        你好
        你好
        你好






    加法边距
第7个答案
    I mean, the following is a CSS only solution that solves exactly your example:
。一些-边缘 {边缘-底部: 100px;}

。消息 {边距顶部:-100px;}

但是我认为它不会帮助你解决虚拟键盘的原始问题。但也许这可以激励其他人找到解决办法。

主要的问题似乎是滚动条是已经做你想要的:

保持其位置,以便最近读取的内容可见。

除了滚动条决定你想看到当前可见内容的顶部,而不是底部。(如果您使用数字,则更容易查看:Https://jsfiddle.net/1co3x48n/ )

如果你愿意使用 javascript,有各种各样的答案: [Https://www.google.com/search?q=scrollbar 总是在 css 网站底部: stackoverflow.com](https://www.google.com/search?q=scrollbar always on bottom css site:stackoverflow.com)

老实说,你可以浏览大约 3 页,只找到 Javascript 答案,这一事实告诉我,你不会找到一个只有 CSS 的答案, 当然不是一个广泛兼容浏览器的。

第8个答案
    None of the solutions provided really seem to work unfortunately. The problem with using onFocus for a textbox is that it won't apply if the textbox already has focus. I've been messing with this for hours and the closest solution I've come up with so far is this:
组件 didmount () {
这个.屏幕高度 = 窗口高度;

让 chatElem = document.querySelector (“。对话-聊天”);

Window.addEventListener ('resize',() => {
让 diff = 这个。屏幕高度-窗口。内高度;

ChatElem.scrollTop + = diff;

这个.屏幕高度 = 窗口高度;
});
}

然而,这似乎只是有时工作。当点击文本框时,它有 100% 的时间可以工作,但是由于某种原因,当关闭虚拟键盘时,它只有在滚动足够时才可以工作。否则,它每次都重置到相同的位置 (靠近底部,但不完全是底部)。

不确定是什么导致的。我想明天将不得不进行更多的调查。这是迄今为止最接近的一次。

第9个答案
    Create a container like in above examples, but then just alter the CSS when you start typing.

我不设置滚动条的位置,只是向上移动整个消息容器。所以无论你的 scrollposition 可能是,将保持不变。至少向下,你当然看不到顶部的线条。

你应该能够根据你的需要调整 css。如果你使用: focus 或稍微不同的 CSS 设置,你甚至可以不使用 JS:

函数激活 () {
文档。查询选择器 (“# 容器”)。类列表。切换 (“活动”);
}
# 容器 {
位置: 相对;
宽度: 300px;
高度: 100vh;
最大高度: 230px;
溢出: 隐藏;
}
# 消息 {
位置: 绝对;
底部: 30px;
溢出: 自动;
高度: 200px;
宽: 100%;
背景: # eee;
}
# Container.active # messages {
底部: 100px;
}
# 发送消息 {
位置: 绝对;
边框: 1px 实心 # ccc;
底部: 0;
高度: 28px;
}
# Container.active # send-message {
高度: 100px;
}


  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好
  你好




第10个答案
第11个答案
    It can very simply be addressed with anchor names. Look at the JS fiddle at https://jsfiddle.net/gvbz93sx/

HTML 变更

JS 变更 document.location.hash = "#bottom";

相关问题

如何从异步调用返回响应? 循环中的 JavaScript 闭包--简单的实际示例 如何从异步调用返回响应? RegEx 匹配打开的标记, 但 XHTML 独立标记除外 PHP 邮件功能不能完成电子邮件的发送 如何从最后一行中的元素中删除边框? 如何设置 SVG 多边形的动画来填充? Br 标记可以具有哪些 CSS 属性? 当它下面的 div 碰撞时,防止 div 向上滚动? 最新版本的谷歌 Chrome, 73.0, 网页应用程序的溢出不再起作用 在可滚动元素上使用时的本地滚动问题