如何让滚动条始终保持底部？

我有一个div元素的滚动条，最初它的位置是顶部。每当我添加一些文本到div元素，那么滚动条不会移动。有什么办法，div元素的位置的滚动条将始终是底部，每当我添加一些文本到div元素，滚动条也自动到底部？如何让滚动条始终保持底部？

这里是我的div元素：

<div class='panel-Body scroll' id='messageBody'></div>

和CSS类

.scroll { 
      height: 450px; 
      overflow: scroll; 
     }

我需要的是，在滚动条的最初的位置应该是底部。

此外，当我点击发送消息，我将消息添加到div元素的messageBody'。那时滚动条应该再次下降。

这是我的滚动条

当前的风格，我想这是事先总是

感谢。

来源

2016-12-01 B M Shams Nahid

[调整scrollba的可能的复制r按钮位置通过仅CSS]（http://stackoverflow.com/questions/33516271/adjust-scrollbar-button-position-through-css-only） –

像这样的东西应该做你想要的东西，如果我明白你想要的东西正确。

用您的聊天消息容器ID替换messageBody在getElementById()中。

var chatHistory = document.getElementById("messageBody"); 
chatHistory.scrollTop = chatHistory.scrollHeight;

这将滚动消息容器到底部。由于滚动位置是以像素为单位记录的，而不是以百分比记录，所以默认情况下，当您向容器中添加更多元素时，滚动位置不会更改。

在将新消息添加到聊天消息容器后执行此操作。

来源

2016-12-01 05:53:17 josephting

我不知道，它不工作，不知何故，我可能错过了一些东西。你有没有看过可能的源代码？ –

@BShammNahid我没有看到你的Javascript的源代码在任何地方。只有HTML和CSS。 – josephting

我upvote它...似乎问问题的人不知道他想做什么 – Fiido93

var messageBody = document.querySelector('#messageBody'); 
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;

来源

2016-12-01 06:16:27

非常感谢@Janet Wu它的工作。我会记住你。 –

原生js很棒;） – Fiido93

你在这里。遵循这个概念。

$('#messages').scrollTop($('#messages')[0].scrollHeight);

#chatbox-history { 
 
    overflow: none; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 200px; 
 
    border: 1px solid #ccc; 
 
} 
 
#messages { 
 
    overflow: auto; 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    max-height: 200px; 
 
} 
 
#messages div { 
 
    border: 1px solid #e2e4e3; 
 
    margin: 5px; 
 
    padding: 10px; 
 
    background: #fafafa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="chatbox-history"> 
 
    <div id="messages"> 
 
    <div>asdjf ;asd</div> 
 
    <div>ajsd fa ;skd f;s</div> 
 
    <div>asdjf ;akjs d;lf a;lksd fj</div> 
 
    <div>ajsd fkaj s;dlf a;ljsdl;fkja;lsd f; asd</div> 
 
    <div>Wassup?</div> 
 
    </div> 
 
</div>

来源

2016-12-01 06:16:56 Aslam

很好的答案，你有伴侣;） – Fiido93

假设你这样的HTML代码。

HTML

<div id="parentDiv"> 
    <div class="people">1</div> 
    <div class="people">2</div> 
    <div class="people">3</div> 
    <div class="people">4</div> 
    <div class="people">5</div> 
    <div class="people">6</div> 
    <div class="people">7</div> 
    <div class="people">8</div> 
    <div class="people">9</div> 
</div>

然后换你的js这样

var objDiv = document.getElementById("parentDiv"); 
objDiv.scrollTop = objDiv.scrollHeight;

DEMO

来源

2016-12-01 06:18:48 Fiido93

如何让滚动条始终保持底部？

回答

相关问题