Javascript 如何模仿GChat'；什么是可滚动区域？_Javascript_Jquery_Html

Javascript 如何模仿GChat'；什么是可滚动区域？

javascript jquery html

Javascript 如何模仿GChat'；什么是可滚动区域？,javascript,jquery,html,Javascript,Jquery,Html,当新文本出现时，GChat会将textarea滚动到末尾，但是如果用户滚动到远离末尾，它会等到您向下滚动后继续此行为仅使用HTML、Javascript和JQuery，如何模拟这种行为？每次添加数据时，执行如下操作： this.scrollTop = this.scrollHeight; 这只是强制您滚动到底部的标准Javascript。要仅强制某人在已处于底部时保持滚动至底部，请执行以下操作： var elem = document.getElementById('myElementNam

当新文本出现时，GChat会将textarea滚动到末尾，但是如果用户滚动到远离末尾，它会等到您向下滚动后继续此行为

仅使用HTML、Javascript和JQuery，如何模拟这种行为？

每次添加数据时，执行如下操作：

this.scrollTop = this.scrollHeight;

这只是强制您滚动到底部的标准Javascript。要仅强制某人在已处于底部时保持滚动至底部，请执行以下操作：

var elem = document.getElementById('myElementName');
var atBottom = (elem.scrollTop >= (elem.scrollHeight - elem.clientHeight));
// add your text updates here
if(atBottom) elem.scrollTop = elem.scrollHeight;

举例

（忽略其他版本的fiddle…我在jQuery上失败了。）

试试这样的方法：）


测试
文本区{
高度：80px；
宽度：450px；
}
var foo=函数（）{
var t=document.getElementById（'foo'）；
if（t['data-scrollinglocked']）返回；
var h=t.高度；
t、 scrollTop=h；
}
var moo=函数（）{
var t=document.getElementById（'foo'）；
t、 innerHTML=t.innerHTML+新日期（）+“\n”；
}
var init=函数（）{
//全局范围；）
mooInterval=setInterval（“moo（）”，1000）；
fooInterval=setInterval（“foo（）”，500）；
var t=document.getElementById（'foo'）；
t['data-scrollinglocked']=0；
t、 onmouseout=函数（）{
t['data-scrollinglocked']=0；
};
t、 onmouseover=函数（）{
t['data-scrollinglocked']=1；
};
t、 onclick=function（）{
t['data-scrollinglocked']=1；
};
t、 onblur=函数（）{
t['data-scrollinglocked']=1；
};
t、 onfocus=function（）{
t['data-scrollinglocked']=1；
};
t、 onblur=函数（）{
t['data-scrollinglocked']=0；
};
}
init（）；

谢谢你的回复。但如果用户移动可滚动文件（停止自动滚动），您将如何与之进行比较？比如说“如果滚动条大小=someN，滚动条不是那么大，那么就不要自动滚动。我正在努力……结果是，这比预期的更具挑战性。可能是我遗漏了一些平凡的细节。是的，这比你想象的要复杂一些。至少在我的技能水平上，我的答案中的链接已经证明是“有效的”“版本。我在访问jQuery中的属性时遇到问题，所以它有点马虎。jQuery对此是否有必要？不完全是，重点是什么？只需在“onmouseover”输入文本区域时停止事件，并在“onmouseout”再次启动它即可？

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
textarea {
    height: 80px;
    width: 450px;
}
</style>
<script type="text/javascript">
var foo = function(){
    var t = document.getElementById('foo');
    if(t['data-scrollinglocked'])return;
    var h = t.scrollHeight;
    t.scrollTop = h;
}

var moo = function(){
    var t = document.getElementById('foo');
t.innerHTML = t.innerHTML + new Date()+"\n";
}

var init = function(){
    // global scope ;)
    mooInterval = setInterval("moo()",1000);
    fooInterval = setInterval("foo()",500);

    var t = document.getElementById('foo');
    t['data-scrollinglocked'] = 0;
    t.onmouseout = function(){
        t['data-scrollinglocked'] = 0;
    };
    t.onmouseover = function(){
        t['data-scrollinglocked'] = 1;
    };
    t.onclick = function(){
        t['data-scrollinglocked'] = 1;
    };
    t.onblur = function(){
        t['data-scrollinglocked'] = 1;
    };
    t.onfocus = function(){
        t['data-scrollinglocked'] = 1;
    };
    t.onblur= function(){
        t['data-scrollinglocked'] = 0;
    };
}
</script>
</head>
<body>
<div class="foo"></div>
<textarea id="foo"></textarea>
<script>init();</script>
</body>

</html>