`

将滚动条(scrollbar)保持在最底部的方法

阅读更多

有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部。
Javascript:
      <script type="text/javascript">
      function add() {
      var now = new Date();
      var div = document.getElementById('scrolldIV');
      div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
      div.scrollTop = div.scrollHeight;
      }
      
      function scrollWindow() {
      scroll(0, 100000);
      setTimeout('scrollWindow()', 200);
      }
      window.onload = function() { scrollWindow(); }
      </script>
      
   html代码 :

      <div id="scrolldIV" style="overflow:scroll; height: 100px; width: 400px; border: 1px solid #999;">
      </div>
      <input type="button" value="插入一行" onclick="add();">

分享到:
评论

相关推荐

    将滚动条(scrollbar)保持在最底部的方法.html

    将滚动条(scrollbar)保持在最底部的方法.html

    自定义recyclerView的滚动条样式

    要自定义滚动条的动画,可以重写`onDrawHorizontalScrollBar()`和`onDrawVerticalScrollBar()`方法,然后在这些方法中绘制自定义的滚动条。这需要对绘图有较深入的理解,通常适用于高度定制的场景。 综上所述,...

    elementUI滚动条,点击dom元素滚动到指定位置.pdf

    在这个例子中,我们使用 ElementUI 的 `el-scrollbar` 组件来实现滚动条的功能。 点击 DOM 元素滚动到指定位置 在这个例子中,我们使用 `@click` 事件来捕捉 DOM 元素的点击事件,并在点击时滚动到指定的位置。...

    让DIV的滚动条自动滚动到最底部的3种方法(推荐)

    以上三种方法都可以实现在接收到新消息时,自动将聊天窗口的滚动条滚动到最底部,从而让用户无需手动操作就能查看到最新的聊天记录。在实际应用中,应根据项目需求和兼容性要求选择合适的方法。需要注意的是,这些...

    vue进入页面时滚动条始终在底部代码实例

    在Vue.js应用中,有时我们需要实现一个功能,即当用户进入页面时,滚动条自动定位到页面底部。这种场景常见于聊天应用或者实时更新的信息流界面,用户打开页面时就能看到最新的内容。以下是一个详细的教程,指导如何...

    阻止滚动条事件冒泡

    总的来说,阻止滚动条事件冒泡是一项常见的前端技术,它可以帮助我们实现更加定制化的滚动交互,比如防止页面整体滚动、在滚动到底部加载更多内容等。通过理解和应用`event.stopPropagation()`,我们可以更好地控制...

    vue 中滚动条始终定位在底部的方法

    滚动条定位在底部,首先想到的是,动态修改滚动条到顶部的距离等于div的高度, 代码实现: var div = document.getElementById('data-list-content') div.scrollTop = div.scrollHeight 但是问题来了,滚动条并没有...

    MFC添加对话框滚动条功能

    2. 在控件列表中找到“滚动条”(SCROLLBAR),并将其拖放到对话框上。确保为滚动条设置正确的ID(例如IDC_SCROLLBAR1)。 3. 在对话框类头文件中,为滚动条添加成员变量,如`CScrollBar m_scrollBar;`。 **步骤2:...

    js 固定位置的层 不随滚动条滚动

    在网页设计中,"js 固定位置的层 不随滚动条滚动" 是一个常见的需求,主要用于实现诸如固定顶部导航、侧边栏或者底部客服窗口等元素。这些元素在用户滚动页面时始终保持在屏幕的特定位置,提升用户体验,让用户可以...

    jquery很炫的滚动条效果

    在网页设计中,用户体验往往受到各种细节的影响,其中之一就是滚动条。一个美观且功能完善的滚动条可以提升网站的视觉效果和交互体验。本教程将深入探讨如何使用jQuery创建一款炫酷的滚动条效果,该效果代码简洁,...

    jquery轻量级上下(左右)滚动条插件及使用方法

    本文将详细介绍一个基于jQuery的轻量级上下(左右)滚动条插件及其使用方法,旨在提升网站的可用性和美观度。 一、jQuery简介 jQuery是一款广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画...

    动态滚动条动态滚动条

    3. **自动隐藏**:现代设计趋势倾向于在内容不足时隐藏滚动条,以保持简洁的界面。这种滚动条称为“隐形滚动条”,只有在鼠标悬停或触摸时才会出现。 4. **自定义样式**:通过CSS(层叠样式表),开发者可以自定义...

    C#001滚动条的应用

    在C#编程中,滚动条(ScrollBar)是一个非常常见的控件,它被广泛用于各种界面设计,以提供用户对大量信息或长内容的浏览能力。滚动条分为水平滚动条(Horizontal Scroll Bar)和垂直滚动条(Vertical Scroll Bar)...

    伸缩菜单和自定义滚动条样式

    在网页设计中,创建动态和交互性的用户体验是至关重要的,这正是伸缩菜单和自定义滚动条样式的目的所在。这两个特性都是通过CSS3和HTML5实现的,它们为网站提供了更高级别的用户界面和视觉吸引力。 首先,让我们...

    listview自定义滚动条样式

    在Android开发中,ListView是一种常用的控件,用于展示大量数据并支持滚动。默认情况下,ListView的滚动条样式是系统预设的,...通过以上步骤,开发者可以灵活地调整滚动条的外观,使其与应用的整体设计风格保持一致。

    QmlTextEdit带滚动条QmlTextEditScrollBar.7z

    5. **数据绑定**: `QmlTextEditScrollBar`可能会利用数据绑定技术,将`QmlTextEdit`的`contentSize`与滚动条的`range`属性进行绑定,这样当`QmlTextEdit`的内容大小改变时,滚动条的范围也会自动更新。 6. **样式...

    滚动条特效

    本文将深入探讨如何使用jQuery实现独特的滚动条特效,并以"custom-scrollbar-plugin"为例,展示如何将普通滚动条转变为吸引眼球的视觉元素。 首先,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理...

    自定义滚动条 scroll js滚动条

    在网页设计中,有时我们希望对页面的默认滚动条进行美化或者定制,使其与网站的风格更加协调,提升用户体验。"自定义滚动条 scroll js滚动条"就是这样一个主题,它涉及到JavaScript库,如jQuery和jScroll,以及图像...

    jscroll_js实现QQ软件滚动条

    在本主题中,我们将深入探讨如何使用`jscroll.js`这个JavaScript库来实现类似QQ软件那样的滚动条效果。 `jscroll.js`是一个轻量级的JavaScript插件,主要用于创建自定义的滚动条,它可以提供更加优雅的滚动体验,...

Global site tag (gtag.js) - Google Analytics