我编写了一个聊天脚本,所有问题都是滚动DIV层.我下载了几个聊天脚本,仔细观察后发现了下面的内容.
当添加新的聊天行时,添加聊天行后滚动条不会向下滚动.它作为滚动添加到DIV层的底部,在制作时不会产生任何干扰.
我做了什么:
之前我使用javascript向下滚动每个固定的间隔.这样做我无法手动向上滚动查看过去的行(由于间隔刷新滚动条移动到设置位置).后来我编写了一个可以向下滚动的javascript,OnClientClick但这样做我只能向下滚动,Chat sender side但是Chat receiver side当添加新的聊天行时它无法向下滚动.
我下载了很多聊天脚本,并检查了如何管理这个特定问题,但我找不到任何解决方案.我相信它的jQuery工作(不确定)任何人都可以告诉我如何解决这个问题?
如果你不理解我的问题,我很抱歉,因为我无法比上面更详细地解释它.但是我可以根据要求提供更多信息.
我使用的语言是ASP.NET,AJAX更新面板,用新值更新div的计时器刻度,javascripts直到现在才用于向下滚动元素.
这是一个聊天室,有一个 div .words 作为容器,里面有一个 .content div。
我希望文本从 .content 的底部显示,所以我使用position:absolute,bottom:0; 关于.内容。但我希望它在 .content 增长高于 .words 时显示滚动条。所以我在.words 上添加了overflow:auto。
如果我删除bottom:0,overflow:auto将正常工作。但如果bottom:0则不起作用。
如何让输入从底部显示,并且溢出时有滚动条?
CSS:
.tbchat-room{
position: fixed;
bottom:0;
width:260px;
border:1px solid #aaa;
background:#fff;
}
.tbchat-room .head{
padding: 3px 10px;
background:#3d9ac1;
color:#fff;
}
.tbchat-room .words{
height:230px;
background:#ececec;
overflow:auto;
position:relative;
}
.tbchat-room .words .content{
position:absolute;
}
.tbchat-room .say{
width:246px;
margin:0;
border-top: 1px solid #ccc;
border-bottom: 0;
border-left: 0;
border-right: 0;
padding:4px 6px;
}
.pull-right{
float:right;
}
.content{
padding:5px 10px;
}
Run Code Online (Sandbox Code Playgroud)
HTML:
<div class="tbchat-room">
<div class="head">
<span class="title">Chat Room</span> …Run Code Online (Sandbox Code Playgroud) 我有一个div我在其中添加了元素.我想在div中添加元素时滚动到div的底部.我知道如何在jquery中执行.但我不知道如何使用jquery Scroll使用angular js 滚动div的底部?
testCaseContainer是div的id.
var elem = document.getElementById('testCaseContainer'); // just to
// scroll down
// the line
elem.scrollTop = elem.scrollHeight;
Run Code Online (Sandbox Code Playgroud)
我想知道如何使用角度?
http://plnkr.co/edit/M8tCL8Szc3h3FatFLycG?p=preview
我在div容器中添加了css以便滚动.
.heightClass{
height:100px;
overflow :auto;
}
Run Code Online (Sandbox Code Playgroud)
如何在添加项目时将焦点移动到下方..请发布您的答案..
我正在使用 purescript-halogen,并且我想在捕获子组件的消息时滚动到 div 底部。然而,卤素中似乎不存在滚动动作控制。那么,如何 滚动到 div 底部呢?
我认为的一种解决方案是,当事件捕获时,从 Main 调用其他进程,而不是 Halogen。我不确定这个解决方案还不错。
我有一个带有内容区域的布局,它有自己的滚动条,因为我希望侧边栏独立滚动。
使用底部的按钮动态附加内容区域的内容。
当内容区域的滚动位置位于最顶部(scrollTop === 0)并且我附加更多内容时,滚动位置保持在顶部。然而,如果滚动位置不在顶部,Firefox 和 Chrome 的行为会有所不同。在 Firefox 中,滚动位置保持相对于顶部,内容附加在下方,如有必要,可在屏幕外附加。然而,在 Chrome 中,滚动位置相对于底部保持不变,将按钮保持在相同位置,导致用户必须向上滚动才能看到新内容。
有没有办法让 Chrome 表现得像 Firefox 一样?
澄清。添加新内容后,我不希望内容区域滚动到底部。我希望它保留在原来的位置,以便用户不必向上滚动即可看到新内容。
var count = 1;
window.addEventListener('load', function() {
var container = document.querySelector('[data-result]');
var button = document.querySelector('button');
button.addEventListener('click', function() {
for (var i = 0; i < 10; i++) {
var element = document.createElement('div');
element.innerHTML = 'Content row ' + count++;
container.appendChild(element);
}
});
});Run Code Online (Sandbox Code Playgroud)
html,
body,
.page {
height: 100vh;
margin: 0;
}
body {
background-color: #eceff1;
}
.page {
display: flex;
flex-direction: …Run Code Online (Sandbox Code Playgroud)我正在客户端使用jQuery编写一个日志"tail -f"应用程序.目前,该应用程序的工作原理是每2秒向服务器发出一次AJAX请求,并将新的日志内容附加到<PRE>页面上预先存在的标记(受此帖子的启发).这一切都很美妙.
我的问题是新内容被附加到页面但不会立即显示.也就是说,所有新的日志消息都只是将滚动条推高.
我想将滚动条"锁定"到页面底部,以便您可以实时观看所有内容.我原本一直在考虑使用jScrollPane"锁定"滚动条位于底部,但现在我认为可能有一种更简单的方法可以将焦点保持在页面底部...
我有一个网站,当我向下滚动时会生成更多产品.与其他网站不同,firebug控制台中没有任何内容.所以,我使用selenium来模拟浏览器.我已经使它工作,但与Firefox驱动程序.但是,由于我正在托管在命令行上运行的Web服务器,因此我使用的是HTMLUNIT.有人能告诉我如何使用HTMLUNIT滚动页面吗?这是现在的代码:
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time
browser = webdriver.Remote("http://127.0.0.1:4444/wd/hub",desired_capabilities=webdriver.DesiredCapabilities.HTMLUNITWITHJS)
browser.get("http://www.somewebsite.com/")
x = browser.find_elements_by_xpath("//div[@id='containeriso3']/div/a[1]")
hrefs = [i.get_attribute('href') for i in x]
print len(hrefs)
time.sleep(2)
browser.execute_script("scroll(0, 2500);")
time.sleep(2)
x = browser.find_elements_by_xpath("//div[@id='containeriso3']/div/a[1]")
hrefs = [i.get_attribute('href') for i in x]
print len(hrefs)
Run Code Online (Sandbox Code Playgroud)
谢谢.
我正在制作一个聊天应用程序,我想要归档的是当加载动态消息时,页面以平滑的动画向下滚动到 div 的底部。
<ul id="messages">
<li>
<p>Not logged in on Epic | Log in here: https://epic.clow.nl/login</p>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)