精华内容
下载资源
问答
  • 目录 示例图说明 ...B:表示 div 元素高度div高度不会随着内容的编号而编号,与有没有出现滚动条无关,只与自己的 height 属性有关 A:表示 div 内文档高度,当没有出现滚动条时,A文档高度...

    目录

    示例图说明

    编码示例

    回到顶/底部

    消息区自动滚动到底部


    示例图说明

         如上图所示,假设橙色表示滚动条,蓝色框表示 div 区域,黑色区域表示看不到的文档部分,高度说明如下:

    B:表示 div 元素高度,div 的高度不会随着内容的编号而编号,与有没有出现滚动条无关,只与自己的 height 属性有关

    A:表示 div 内文档高度,当没有出现滚动条时,A文档高度等于 div 高度(A = B);随着内容的增加出现滚动条时,A 的值会增加

    C:滚动条相对 div 元素顶部(top)边缘的距离,与上面隐藏的文档无关。

    A >= B + C;// 图1 中 C = 0; 图2 中 A > B + C ;图3 中 A = B + C;

         div 文档总高度(A)获取方式如下

    var scrollHeight = document.getElementById("#div1").scrollHeight; //scrollHeight 必须 DOM 操作,JQuery 没有对应方法

    var scrollHeight = $("#div1")[0].scrollHeight //可以使用 JQuery 先选择元素,然后 [0] 转为 DOM 对象

         div 元素高度(B)获取方式如下

    var height=$("#dvi1").height() // JQuery 操作方式

         div 滚动条相对 div 元素顶部(top)边缘的高度

    var scrollTop = $("#div1").scrollTop();  // JQuery 获取方式

    var scrollTop = document.getElementById("div1").scrollTop; // DOM 方式

    编码示例

    回到顶/底部

    实现代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Div 距离汇总</title>
        <style type="text/css">
            .test {
                width: 500px;
                height: 300px;
                background-color: #444444;
                overflow: auto;
                color: white;
            }
    
            h1 {
                margin-top: 80px;
            }
        </style>
        <!-- JQuery CDN-->
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        <script type="text/javascript">
    
            $(function () {
                /**
                 * 回到顶部
                 */
                $("#top").click(function () {
                    $(".test").scrollTop(0);
    
                    /**
                     * scrollTop:div 滚动条距离 div 上边缘的距离
                     * scrollHeight:div 内文档总高度(包括被隐藏的),当没有出现滚动条时,scrollHeight = height
                     * height:div 元素的高度,只与自己 height 属性有关,与滚动条无关
                     */
                    let scrollTop = $("#inner").scrollTop();
                    let scrollHeight = $("#inner")[0].scrollHeight;
                    let height = $("#inner").height();
                    console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight);
    
                });
    
                /**
                 * 调到底部
                 */
                $("#bottom").click(function () {
                    let scrollHeight = document.getElementById("inner").scrollHeight;
                    $(".test").scrollTop(scrollHeight);
    
                    let scrollTop = document.getElementById("inner").scrollTop;
                    let height = $("#inner").height();
                    scrollHeight = document.getElementById("inner").scrollHeight;
    
                    console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight);
                });
    
                /**
                 * 运动到中间
                 */
                $("#center").click(function () {
                    let scrollHeight = document.getElementById("inner").scrollHeight;
                    let middle = scrollHeight / 2;
                    $(".test").scrollTop(middle);
    
                    let scrollTop = $("#inner").scrollTop();
                    let height = $("#inner").height();
                    scrollHeight = document.getElementById("inner").scrollHeight;
                    console.log("height=" + height, "scrollTop=" + scrollTop, "scrollHeight=" + scrollHeight, "middle=" + middle);
                });
            });
    
        </script>
    </head>
    <body>
    <div class="test" id="inner">
        <h1>China 1</h1>
    
        <h1>USA 1</h1>
    
        <h1>UK 1</h1>
    
        <h1>China 2</h1>
    
        <h1>USA 2</h1>
    
        <h1>UK 2</h1>
    
        <h1>China 3</h1>
    
        <h1>USA 3</h1>
    
        <h1>UK 3</h1>
    </div>
    <button id="top">回到顶部</button>
    <button id="bottom">跳到底部</button>
    <button id="center">运动中间</button>
    </body>
    </html>

    消息区自动滚动到底部

    实现代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>Div 距离汇总</title>
        <style type="text/css">
            .test {
                width: 300px;
                height: 100px;
                background-color: #444444;
                overflow: auto;
                color: white;
            }
    
            h1 {
                margin-top: 80px;
            }
        </style>
        <!-- JQuery CDN-->
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    
        <script type="text/javascript">
    
            $(function () {
                /**
                 * 发送消息时,滚动条自动移动在底部
                 */
                $("#send").click(function () {
                    let message = $("textarea").val();
                    $("#inner").append("<span>" + message + "</span><br>");
    
                    /**
                     * scrollHeight:div 内文档总高度(包括被隐藏的),当没有出现滚动条时,scrollHeight = height
                     * height:div 元素的高度,只与自己 height 属性有关,与滚动条无关
                     */
                    let scrollHeight = $("#inner")[0].scrollHeight;
                    let height = $("#inner").height();
                    /**
                     * 滚动条距离元素顶部的高度 + div 元素的高度 = 文档的高度
                     * 这样滚动条刚好在底部
                     */
                    $("#inner").scrollTop(scrollHeight - height);
                });
            });
    
        </script>
    </head>
    <body>
    <div class="test" id="inner">
    </div>
    <div class="test">
        <textarea style="width: 100%;height: 100%;background-color: white"></textarea>
    </div>
    
    <button id="send">发送</button>
    </body>
    </html>

     

    展开全文
  • 获取div#test滚动条高度值】 document.getElementById('code').scrollHeight; 【获取div#test当前滚动值】 document.getElementById('code').scrollTop; 【设置div#test滚动条高度值】 document....

    假设有一个div#test,滚动高度200px,div内容高度1000px

    【获取div#test滚动条高度值】

    document.getElementById('code').scrollHeight;

    【获取div#test当前滚动值】

    document.getElementById('code').scrollTop;

    【设置div#test滚动条高度值】

    document.getElementById('code').scrollTop=100;

    展开全文
  • 获取div滚动条滚动到底部的事件 关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全、正确搞明白的。  我知道很多人不同意我的观点。但是如果去百度上搜素,与 jQuery 滚动条有关的信息,都是...
    
    

    关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全、正确搞明白的。

        我知道很多人不同意我的观点。但是如果去百度上搜素,与 jQuery 滚动条有关的信息,都是关于滚动条外观和滚动条插件的。我最近在制作一个滚动条相关的页面效果,去 CSDN 论坛里提问,得到了一段代码,还是错误的。

        jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它。

        我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。

        一、滚动条有关属性的正确理解:

        假设有以下Html代码:

        <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
          <div style="height:750px;">
          </div>
        </div>

        由于内部的div标签高度比外部的长,并且外部的div允许自动出现垂直滚动条,所以用浏览器打开后,可以看到垂直滚动条。滚动条向下拖动一段距离,看到的页面效果如下(右部的a、b是我抓图后,用PS标出来的):

     

        那么,这里的外部div 的scrollTop、scrollHeight 属性到底是什么呢?
        有人说,scrollTop等于图中标出的a。scrollHeight 等于外部div的高度500px。其实,都不对。
        其实,图中标出的a、b,对我们编程写js代码没有任何具体意义,它仅仅具有象征意义。
        实际上,在js代码里,滚动条是被抽象为一个“点”来对待的。scrollHeight其实不是“滚动条的高度”(b),而是表示滚动条需要滚动的高度,即内部div的高度750px。而scrollTop表示滚动条(一个点)当前的位置在750px里占了多少,不是图中标出的a。
        这时,我们很叹服Windows的设计者,滚动条设计的如此形象美妙,欺骗了多少头脑简单的鼠标操作员。a和b的距离分别标识滚动条滚动了和需要滚动的距离,它们之间分别有一个对应的关系,但这些不是我们这些开发应用程序的程序员考虑的,是设计操作系统GUI图形接口的程序员考虑的。

        二、判断垂直滚动条是否到达底部
        廓清了以上的概念,编码其实就比较简单了, 以下是示例代码:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
          <meta http-equiv="content-type" content="text/html;charset=utf-8">
          <title>下拉滚动条滚到底部了吗?</title>
          <script language="javascript" src="jquery-1.4.2.min.js"></script>
          <script language="javascript">
          $(document).ready(function (){
            var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
            var nScrollTop = 0;   //滚动到的当前位置
            var nDivHight = $("#div1").height();

            $("#div1").scroll(function(){
              nScrollHight = $(this)[0].scrollHeight;
              nScrollTop = $(this)[0].scrollTop;
              if(nScrollTop + nDivHight >= nScrollHight)
                alert("滚动条到底部了");
              });
          });
          </script>
        <body>
        <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:500px;">
          <div style="background-color:#ccc; height:750px;">IE 和 FF 下测试通过</div>
        </div>
        </body>
        </html>
        代码解说:
        内部div高度为750,外部div高度为500,所以垂直滚动条需要滚动750-500=250的距离,就会到达底部,参见语句nScrollTop + nDivHight >= nScrollHight。
        程序中,在外部div的scroll(滚动)事件中侦测和执行if判断语句,是非常消耗CPU资源的。用鼠标拖拉滚动条,只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头,事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使用。
        本示例判断的是没有水平滚动条的情况,在有水平滚动条时,情况会有细小的变化,所以nScrollTop + nDivHight >= nScrollHight语句中,需要用“>=”比较运算符,而没有水平滚动条的时候,等号“=”就足够了。大家可以实际测试一下。还可以判断水平滚动条是否滚动到头了。

    展开全文
  • 关于获取div滚动条高度问题

    千次阅读 2015-12-21 12:57:09
    网上找了一大堆都是重复的或者复制的答案,参考地址:height、clientHeight、scrollHeight、offsetHeight区别 - 雨藤 - 博客园 ...jquery如何获取元素的滚动高度 - microsoft-zn.cn - 博客园 http://www.cnblogs.co

    网上找了一大堆都是重复的或者复制的答案,参考地址:height、clientHeight、scrollHeight、offsetHeight区别 - 雨藤 - 博客园 http://www.cnblogs.com/yuteng/articles/1894578.html

    jquery如何获取元素的滚动高度 - microsoft-zn.cn - 博客园 http://www.cnblogs.com/sntetwt/p/3823592.html,

    最后终于找到了一个正确的答案,是obj[0].scrollHeight可以获取滚动条变化的高度,参考地址是:jquery 有没有 scrollHeight来获取实际的高度_百度知道 http://zhidao.baidu.com/link?url=sdtbzRDj1sfS6j0T2StaNpkBcqXcoTVXCRNfnOA2AKueWpq_I5bzFWNalTq2ZFsJVN51eeVg_fHDlzi0gmfvtkkgOziKGDHIpiaZIvnXmze


    展开全文
  • 获取div滚动条滚动到底部的事件[转]

    万次阅读 2012-11-02 15:09:52
    关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全、正确搞明白的。  我知道很多人不同意我的观点。但是如果去百度上搜素,与 jQuery 滚动条有关的信息,都是关于滚动条外观和滚动条插件的。我最近在...
  • DIV实现纵向滚动条

    千次阅读 2015-12-05 17:12:47
    DIV实现纵向滚动条overflow-y:scroll的使用, ...表示当你内容超过div高度出现滚动条 overflow语法如下: overflow : visible | auto | hidden | scroll  参数:  visible :不剪切内容也不添加滚动条。假
  • 获取div滚动条的宽度

    2014-07-31 11:50:00
    获取滚动条的宽度: function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement('div'); oDiv.style.cssText = 'position:absolute; top:-1000px; width:100px; height:100px; over....
  • 背景:有这样一种情况:设置div的最大高度为xx%,想要自适应浏览器
  • $("#content").append('<div>' + data.msg + '</div>'+.'<br>');$('#content').attr({ scrollTop: $('#content')....//jQuery版本1.6+时,用prop()方法代替attr()方法:【重点,否则获取不到】$('...
  • 这又是一个浏览器兼容问题,解决IE火狐Operal多浏览器 获取当前Div所在的滚动条高度
  • div超出屏幕高度后自动出现滚动条

    千次阅读 2012-10-20 15:41:02
    &lt;script language="javascript" type="text/javascript"... // 浏览器的高度div高度 var height = $(window).height(); var divHeight = $("#scolldiv").height(...
  • 原因想要做响应式设计,遇到——本来没有滚动条,缩小窗口时出现竖直滚动条,因为获取不到document+滚动条的宽度,所以可能莫名其妙的,没有在设置好的断点处达成相应效果。所以需要获取整个页面包括滚动条的宽度做...
  • 代码如下:function setheight() { var div=document.getElementById(“event_basicInfo”); //div.style.width=”40%”; div.style.height=400; div.style.overflow=”auto”; } [removed]=setheight;
  • 怎么获取一个有滚动条div的实际高度 ?outerHeight,offsetHeight试了,都不行啊
  • 这里写自定义目录标题jq获取滚动条滚动的高度 jq获取滚动条滚动的高度 场景:为了实现div滚动到一定的位置时,变成悬浮顶部的效果 var win=$(window); //得到窗口对象 var sc=$(document);//得到document文档对象...
  • 所以要获取div内部滚动了多少距离,用session存起来,再回到原本的位置; ////获取滚动距离 var WT=0; $('.jg-list-page').on('scroll', function (e) { WT = parseInt(e.target.scrollTop); }); //点击事件里...
  • 今天在电脑端看csdn时,发现文章界面一般分为三大块:左边侧...左边侧边栏是当滚动高度超过侧边栏高度时,设置为fixed,即这时候侧边栏保持不变,bottom=0 let aside = document.getElementsByClassName('aside')...
  • 如下,预期效果满屏都是红色,没有滚动条。.div{height:100vh;backgroud:red;}实际效果是会有滚动条,因为body 有默认的 8px 的margin,清掉就好了body{margin:0;}.div{height:100vh;backgroud:red;}这也只是在部分...
  • jQuery获取元素位置、滚动条高度

    千次阅读 2017-07-17 11:51:03
    获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
  • Div滚动条定位设置

    万次阅读 2018-08-17 14:58:40
    1.div &lt;div id="DataDiv" style="overflow-x: hidden;overflow-y: scroll;max-height:500px;...document.getElementById('DataDiv').scrollTop //Div滚动条的垂直位置设置属性 ...
  • //图片展示层中图片过长的时候显示滚动条效果 var isMouseDown = false; var scrollY = 0; var scrollObjInfo = new Array(); var mouseDownY = null; var scrollBarIndexHight = null; var scrollY = null; //...
  • 获取div高度

    千次阅读 2018-10-11 17:34:00
    1、获取div的文档总高度(必须DOM操作): var scrollHeight=document.getElementById("inner").scrollHeight; // jq中没有scrollHeight -只有scrollTop():// 所以用DOM操作获取元素并计算scrollHeight。12342、...
  • html自定义的DIV垂直滚动条

    万次阅读 2016-06-24 12:24:47
    首先说一下自定义滚动条的一个要求:鼠标滚动在它div上滚动时,如果没有滚到顶端或底部则不能影响页面滚动条和系统自带一样 让一个div拥有滚动条 1、只有垂直滚动条 #mydiv1 {  position: relative;  overflow-...
  • 最近在项目中想实现Div层垂直居中显示,可是无论怎么尝试都无法实现在IE中获得当前Page的高度。后来Google到下面的代码,发现原来是利用document.documentElement.clientHeight,真让人有点莫名其妙。function ...
  • css .fixed { position: fixed; top: 0; } javascript function my$(id) { return document.getElementById(id); } //获取页面向上或者向左卷曲出去的距离...
  • JQuery+DIV自定义滚动条样式

    千次阅读 2012-06-07 14:31:52
    简单思路:用DIVDIV自身的滚动条相互控制内容的滚动,DIV自身的滚动条样式可以用DIV层覆盖,重写滚动条样式 JQuery计算滚动条长度和位置,代码如下: var scrMinHeight = 1; //滚动条最小高度 var ...
  • 下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的。 首先我们需要知道的两个定义是: 滚动条距离浏览器顶部的高度 = 窗口滚动条高度滚动条...
  • 很多人疑惑怎么用selenium控制网页div滚动条的滚动,其实这个问题很简单,用JS很简单就可以实现。 示例HTML代码如下:<!DOCTYPE html> div.scroll { background-color:#00FFFF; width:100px; height:100px; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,655
精华内容 8,262
关键字:

获取div的高度出现了滚动条