相关疑难解决方法(0)

自动滚动到页面底部

考虑一下我有一个问题清单.当我点击第一个问题时,它会自动将我带到页面底部.

事实上,我知道这可以使用jQuery完成.

那么,你能给我一些文件或一些链接,我可以找到这个问题的答案吗?

编辑:需要滚动到页面底部的特定HTML 元素

javascript jquery

362
推荐指数
14
解决办法
61万
查看次数

如何在添加数据时自动滚动到div的结尾?

我有一个table的内部div具有以下样式:

#data {
    overflow-x:hidden;
    overflow-y:visible;
    height:500px;
}
Run Code Online (Sandbox Code Playgroud)

一旦将足够的数据添加到表中,这将显示垂直滚动条.但是,当添加新数据时,我希望div元素自动滚动到底部.

我可以使用哪些JavaScript代码?如果有必要,我愿意接受JQuery中的选项,但更喜欢JavaScript解决方案.

html javascript css jquery

87
推荐指数
2
解决办法
25万
查看次数

使用Vue.js滚动到div的底部

我有一个Vue组件,里面有几个元素.我想在调用组件中的方法时自动滚动到该元素的底部(基本上,与滚动到div底部的方法相同).但是,我还没有找到在我的组件中获取元素并进行修改的方法scrolTop

我目前正在使用Vue 2.0.8

javascript vue.js

31
推荐指数
7
解决办法
7万
查看次数

Firefox,Edge和IE中的Flexbox列反转

我正在努力创建一个快速响应的应用程序; 在更大的屏幕,还有的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中,滚动条可见但已禁用.

有任何想法吗?我可能错过了供应商前缀吗?

html css firefox internet-explorer flexbox

17
推荐指数
2
解决办法
5234
查看次数

自动滚动到底部DIV

我已经建立了聊天系统,但是滚动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)

css jquery

10
推荐指数
2
解决办法
5万
查看次数

滚动页面以便元素可见

我刚刚尝试了原型的scrollTo函数,正如文档所述,它

滚动窗口,使元素显示在视口的顶部

我想要一个功能

  1. 如果元素在视口中不完全可见,则仅滚动
  2. 滚动以使元素出现在视口的中心

有没有人知道原型,scriptaculous或独立的这样的功能?

javascript prototypejs

8
推荐指数
1
解决办法
4203
查看次数

无法滚动网页的分屏

我在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)

vba scroll excel-vba web-scraping internet-explorer-11

8
推荐指数
1
解决办法
693
查看次数

如何使 Div 滚动到底部

我有一个文本框和一个按钮。在 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)

javascript jquery scroll

6
推荐指数
1
解决办法
1万
查看次数

添加新消息时滚动到底部

我正在制作一个聊天机器人。当用户给出新输入或通过 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)

html javascript css parceljs

6
推荐指数
2
解决办法
1万
查看次数

css 位置:绝对,底部:0 父级溢出:自动

这是一个聊天室,有一个 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)

html css scroll vertical-alignment

5
推荐指数
1
解决办法
1584
查看次数