实现div滚动条默认最底部以及默认最右边的示例代码

有个需求，要在显示聊天框时，固定框的大小为300px高度，宽度50px左右，然后当聊天内容超出宽度或者高度时会出现滚动条，并且垂直滚动条要默认最底部，以便显示最新消息，水平滚动条一般都是默认最左，这里列出默认最底部以及默认最右边的方法的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实现div滚动条默认最底部以及默认最右边</title>
  <script type="text/javascript" src="jquery文件地址"></script>
<script type="text/javascript">
 $(document).ready(function(){
  $('#scroll_div').scrollTop( $('#scroll_div')[0].scrollHeight);
  $('#scroll_div').scrollLeft( $('#scroll_div')[0].scrollWidth);
 });
</script>
<body>

<div id="scroll_div" style="overflow-y:scroll; overflow-x:scroll;width:50px; height:300px; border:1px solid #F00;">
  DIVCSS5测试内容，欢迎来到DIVCSS5学习DIV+CSS技术。大家可以通过DIVCSS5主站上的所有免费CSS教程足可学会DIV CSS技术 -如果需要深入系统学习、较短时间达到理想学习效果可参加DIV+CSS培训班学习。
</div>
</body>
</html>

以上这篇实现div滚动条默认最底部以及默认最右边的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Javascript实现DIV滚动自动滚动到底部的代码

    查询了一下相关的资料,Div没有自动滚动的属性,只能模拟鼠标的滚动来现实想要的效果. 关键的部分部分在这里:div.scrollTop = div.scrollHeight; 下面是具体实现的精简代码: 复制代码 代码如下: <html> <body> <div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;"> <table style

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

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. 但同样的代码拿到我这里却完全失效,又仔细查了下资料说XHTML标准下scrollTop的值恒为0,解决办法是使用 document.documentElement.scrollTop代替document.body.scrollTop,讲了半天所解决的是整个页 面的滚动条.这个方法我是用不了了,因为

  • 用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法

    如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> funct

  • jQuery实现将div中滚动条滚动到指定位置的方法

    本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div

  • 判断div滑动到底部的scroll实例代码

    实例如下所示: <!DOCTYPE html> <html> <head> <title>判断div滑到底部的代码</title> <script type="text/javascript" src="jquery-3.1.0.min.js"></script> <style type="text/css"> #scrollTest{ width:1

  • JS实现判断滚动条滚到页面底部并执行事件的方法

    需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个

  • 实现div内部滚动条滚动到底部和顶部的代码

    实例如下所示: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .scrolldiv{ width: 500px; height: 400px; margin: 10px auto; background: #f00; overflow-y: scroll; padding: 10px; } </style> &

  • 实现div滚动条默认最底部以及默认最右边的示例代码

    有个需求,要在显示聊天框时,固定框的大小为300px高度,宽度50px左右,然后当聊天内容超出宽度或者高度时会出现滚动条,并且垂直滚动条要默认最底部,以便显示最新消息,水平滚动条一般都是默认最左,这里列出默认最底部以及默认最右边的方法的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>实现div滚动条默认最底部以及默认最右边</title&

  • Vue下滚动到页面底部无限加载数据的示例代码

    看到一篇Implementing an Infinite Scroll with Vue.js, 觉得挺实用的就看了下, 顺便简单翻译了一下给需要的人参考. 从这个项目中可以加深对Vue的生命周期的理解, 何时开始axios请求, 如何结合Vue使用原生js来写scroll事件等等, 我这里主要是对原文的重点提取和补充 本文技术要点 Vue生命周期 axios简单用法 moment.js格式化日期 图片懒加载 结合原生js来写scroll事件 请求节流 创建项目 首先创建一个简单的vue项目 #

  • div li的多行多列 无刷新分页示例代码

    div li的多行多列 无刷新分页示例代码

    翻页文件一次加载了全部的内容,因而不是很适合大型的网站,而适用于数据比较少的情况. 本例未使用数据库.  PHP Code 复制代码 代码如下: <div class="container"> <ul id="content"> <?php for ($i=1; $i<=53; $i++){?> <li><span><?php echo $i?></span></li&g

  • 一个用jquery写的判断div滚动条到底部的方法【推荐】

    一个用jquery写的判断div滚动条到底部的方法【推荐】

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它. 我们现在只探讨和垂直滚动有关的 scrollTop.scrollHeight 属性. 一.滚动条有关属性的正确理解: 假设有以下Html代码: <div id="div1" style="overflow-y:auto; ove

  • 浅析jquery如何判断滚动条滚到页面底部并执行事件

    本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. 首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.

  • jQuery检测滚动条是否到达底部

    jQuery检测滚动条是否到达底部

    一.jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height()    获取整个页面的高度 $(window).height()    获取当前也就是浏览器所能看到的页面的那部分的高度.这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的 scrollTop()    获取匹配元素相对滚动条顶部的偏移. scrollLeft()    获取匹配元素相对滚动条左侧的偏移. scroll([[data],fn])  

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

    本文实例为大家分享了vue进入页面时滚动条始终在底部的具体代码,供大家参考,具体内容如下 mounted () { this.scrollToBottom(); }, //每次页面渲染完之后滚动条在最底部 updated:function(){ this.scrollToBottom(); }, methods:{ scrollToBottom: function () { this.$nextTick(() => { var container = this.$el.querySelector

  • 异步加载技术实现当滚动条到最底部的瀑布流效果

    异步加载技术实现瀑布流效果.当滚动条到最底部的时候触发一个事件,这个事件写入$.get()事件,向内部程序页传递类别id和页码,程序将会返回那个类别下的相对页的产品列表,如果程序查询当前类无产品即返回空. 滚动条事件要写在window.onscroll中才有效判断.如下: window.onscroll=function(){<br> // var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; va

  • 判断滚动条滑到底部触发事件(实例讲解)

    实例如下所示: $(document).on("scroll", function () { //真实内容的高度 var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight); //视窗的高度 var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body

随机推荐