考虑一下我有一个问题清单.当我点击第一个问题时,它会自动将我带到页面底部.
事实上,我知道这可以使用jQuery完成.
那么,你能给我一些文件或一些链接,我可以找到这个问题的答案吗?
编辑:需要滚动到页面底部的特定HTML 元素
我有一个table的内部div具有以下样式:
#data {
overflow-x:hidden;
overflow-y:visible;
height:500px;
}
Run Code Online (Sandbox Code Playgroud)
一旦将足够的数据添加到表中,这将显示垂直滚动条.但是,当添加新数据时,我希望div元素自动滚动到底部.
我可以使用哪些JavaScript代码?如果有必要,我愿意接受JQuery中的选项,但更喜欢JavaScript解决方案.
我正在努力创建一个快速响应的应用程序; 在更大的屏幕,还有的div的列表,您可以滚动起来,看看以前的申报单("传统"的行为).在较小的屏幕上,它显示相同的列表但反转顺序,因此向下滚动看到显示div.
我认为flexbox对于这个来说是一个很棒的解决方案,而且它是......在Chrome上.
这是HTML:
<div id="list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Run Code Online (Sandbox Code Playgroud)
而且,CSS:
#list {
display: flex;
flex-direction: column-reverse;
height: 250px;
overflow-y: scroll;
border: 1px solid black;
}
.item {
flex: 1;
padding: 2em;
border: 1px dashed green;
}
Run Code Online (Sandbox Code Playgroud)
以及展示它的小提琴:http://jsfiddle.net/jbkmy4dc/3/
在Chrome中,listdiv正确显示滚动条.但是,在Firefox和IE/Edge中,滚动条可见但已禁用.
有任何想法吗?我可能错过了供应商前缀吗?
我已经建立了聊天系统,但是滚动div的问题是滚动条必须在底部作为默认值.
DIV
<div class="chat-body chat-scroll" id="chat-scroll"></div>
Run Code Online (Sandbox Code Playgroud)
样式
.chat-scroll{position: absolute; top:0px; bottom: 0px; overflow-y: auto;}
Run Code Online (Sandbox Code Playgroud)
我使用JQuery从输入表单提交消息来重新加载#chat-scroll的内容,并且自动滚动可以提交,但是当第一次加载页面时,滚动只停留在div的中间#chat -滚动.与我提交消息时不同,当我发送消息时它将会显示在底部.
JQuery For Scrolling
$('#chat-scroll').animate({
scrollTop: $('#chat-scroll').get(0).scrollHeight}, 2000);
Run Code Online (Sandbox Code Playgroud) 我刚刚尝试了原型的scrollTo函数,正如文档所述,它
滚动窗口,使元素显示在视口的顶部
我想要一个功能
有没有人知道原型,scriptaculous或独立的这样的功能?
我在vba中编写了一个脚本来从网页中删除一些项目.默认情况下,打开该页面时可以看到4/5项.但是,当网页向下滚动时,网页会显示其余的项目.如果不是分屏,我可以用它来处理它.parentWindow.scrollBy.由于我不知道如何滚动任何网页的部分屏幕,我会陷入困境.任何有关这方面的帮助将受到高度赞赏.
链接到网页:Page_Link
这是我到目前为止所写的:
Sub Get_Result()
Const URL As String = "replace with above link"
Dim IE As New InternetExplorer, html As HTMLDocument
Dim storage As Object, posts As Object, post As Object
With IE
.Visible = True
.navigate URL
Do Until .readyState = READYSTATE_COMPLETE: Loop
Set html = .document
End With
For i = 1 To 5
Set storage = html.getElementsByClassName("sc-jqCOkK gkztbk")
html.parentWindow.scrollBy 0, 100
'SendKeys "{end}"
Application.Wait Now + TimeValue("00:00:003")
Next i
For Each posts In …Run Code Online (Sandbox Code Playgroud) 我有一个文本框和一个按钮。在 div 内的表格中按下添加按钮后。当max-height:100px;超出的overflow-y:auto; addbarcode();方法是一个 ajax 帖子时,我希望 div 滚动到页面底部,它将调用 jquerydataTable method来填充服务器端的数据。
尝试 1
var element = document.getElementById("divcontent");
element.scrollIntoView(false);
Run Code Online (Sandbox Code Playgroud)
尝试 2
var element = document.getElementById("divcontent");
$('#divcontent').scrollTo(element.get(0).scrollHeight);
Run Code Online (Sandbox Code Playgroud)
尝试 3
var objDiv = document.getElementById("divcontent");
objDiv.scrollTop = objDiv.scrollHeight;
Run Code Online (Sandbox Code Playgroud)
以上尝试均无效。
编辑
<div class="row" id="divcontent" style="max-height:100px; overflow-y:auto">
<div class="col-md-12 col-sm-12">
<table class="table table-striped table-responsive" id="codelist">
<thead>
<tr>
<th>
SN
</th>
<th>
Serial Number
</th>
</tr>
</thead>
</table>
</div>
Run Code Online (Sandbox Code Playgroud)
Javascript
$(document).ready(function () {
$("#scanner").on('keyup paste', function (e) {
var code = (e.keyCode …Run Code Online (Sandbox Code Playgroud) 我正在制作一个聊天机器人。当用户给出新输入或通过 API 发送数据时,我想滚动到聊天框的底部。
它不滚动,滚动只是停留在同一位置,但数据正在添加到聊天框中
我已经尝试过其他聊天机器人的代码,但它也不起作用
var outputArea = $('#chat-output');
$('#user-input-form').on('submit', function (e) {
e.preventDefault();
var message = $('#user-input').val();
outputArea.append(`
<div class='bot-message'>
<div class='message'>
${message}
</div>
</div>
`);
const req = https.request(options, (res) => {
res.setEncoding('utf8');
res.on('data', (d) => {
const myobj = JSON.parse(d);
if ('narrative' in myobj.conversationalResponse.responses[0]) {
const temp = myobj.conversationalResponse.responses[0].narrative.text;
outputArea.append(`
<div class='user-message'>
<div class='message'>
${temp}
</div>
</div>
`);
} else if ('imageUrl' in myobj.conversationalResponse.responses[0]) {
const img = myobj.conversationalResponse.responses[0].imageUrl;
if ('narrative' in myobj.conversationalResponse.responses[1]) {
const text_r = …Run Code Online (Sandbox Code Playgroud)这是一个聊天室,有一个 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) javascript ×6
css ×5
html ×4
jquery ×4
scroll ×3
excel-vba ×1
firefox ×1
flexbox ×1
parceljs ×1
prototypejs ×1
vba ×1
vue.js ×1
web-scraping ×1