js/jq宽高的理解与运用

document：
1. 与client相关的宽高
document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

2. 与offset相关的宽高

3. 与scroll相关的宽高

网页滚动到顶部或底部：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br />

    <br /><br /><br /><br /><br /><br />

    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>

    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>

    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>

    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>

    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>

    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>

<script>

function scrollBottomOrTop() {

    var clients = window.innerHeight || document.documentElement.clientHeight

    || document.body.clientHeight;

    var scrollTop = document.body.scrollTop;

    var wholeHeight = document.body.scrollHeight;

    if(clients+scrollTop>=wholeHeight){

        alert('我已经滚动到了底部');

    }

    if(scrollTop == 0) {

        alert('我已经滚动到顶部了');

    }

}

window.onscroll = scrollBottomOrTop;

</script>

</body>

</html>

div滚动到底部加载

http://jsbin.com/fafexeqifi/edit?html,output

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <style>

    .scrolldiv {

      width: 500px;

      height: 400px;

      margin: 10px auto;

      background-color: #FF0000;

      overflow-y: scroll;

      padding: 10px;

    }

  </style>

</head>

<body>

  <div class="scrolldiv" id="testDiv">

    <br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br>

    <br><br><br><br><br><br><br><br><br><br><br>

  </div>

  <script>

    var divscroll = document.getElementById('testDiv');

    function divScroll() {

      var wholeHeight = divscroll.scrollHeight;

      var scrollTop = divscroll.scrollTop;

      var divHeight = divscroll.clientHeight;

      if(scrollTop+divHeight>=wholeHeight) {

        alert('div滚动到底部了');

      }

      if(scrollTop == 0) {

        alert('滚动到头部了');

      }

    }

    divscroll.onscroll = divScroll;

  </script>

</body>

</html>

计算滚动轴的宽度1

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>获取滚动轴的宽度</title>

</head>

<body>

  <script>

      function getScrollBarWidth() {

          var el = document.createElement('p'),

          styles = {

              width: '100px',

              height: '100px',

              overflowY: 'scroll'

          },i,scrollBarWidth;

          for(i in styles) {

              el.style[i] = styles[i];

          }

          document.body.appendChild(el);

          scrollBarWidth = el.offsetWidth - el.clientWidth;

          el.remove();

          return scrollBarWidth;

      }

      console.log(getScrollBarWidth());

  </script>

</body>

</html>

计算滚动轴的宽度2

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>获取滚动轴的宽度</title>

</head>

<body>

  <script>

      function getScrollBarWidth() {

          var el = document.createElement('p'),

          styles = {

              width: '100px',

              height: '100px'

          }, i, clientWidth1, clientWidth2, scrollBarWidth;

          for(i in styles) {

              el.style[i] = styles[i];

          }

          document.body.appendChild(el);

          clientWidth1 = el.clientWidth;

          el.style.overflowY = 'scroll';

          clientWidth2 = el.clientWidth;

          scrollBarWidth = clientWidth1 - clientWidth2;

          el.remove();

          return scrollBarWidth;

      }

      console.log(getScrollBarWidth());

  </script>

</body>

</html>

jquery滚动到底部和头部加载

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <title>jquery滚动到底部和头部加载</title>

</head>

<body>

<div style="height: 3000px;width:100%"></div>

<script>

$(window).scroll(function () {

  var ks_area = $(window).height();

  var wholeHeight = $(document).height();

  var scrolltop = $(window).scrollTop();

  if(ks_area+scrolltop >= wholeHeight) {

    alert('滚动到底部了');

  }

  if(scrolltop == 0) {

    alert('滚动到头部了');

  }

})

</script>

</body>

</html>

http://jsbin.com/xemafiveti/edit?html,output

js/jq宽高的理解与运用的更多相关文章

JS/jQuery宽高的理解和应用
1.widows:窗口.window对象可省略 2.document对象是window对象的一部分浏览器的Html文档成为Document对象 window.location===document. ...
js各种宽高(1)
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
关于html中的设置body宽高的理解
有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效 ...
JS 各种宽高
1.window的各种宽高 outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览 ...
原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
js各种宽高(2)
在javascript和jquery中,都有对各种高度的写法,在这里,我们就着重讲一下窗口.文档等高度的理解.(宽度和高度差不多!) jquery的各种高度首先来说一说$(document)和$(w ...
js 浏览器宽高各种
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((do ...
js常用宽高属性
document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...
js获取宽高
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

随机推荐

java.lang.ClassCastException: android.widget.RelativeLayout cannot be cast to android.widget.TextView
最近在学习drawerLayout时,遇到这个bug.如下示: java.lang.ClassCastException: android.widget.RelativeLayout cannot b ...
Tornado 异步客户端
前言 Tornado是很优秀的非阻塞式服务器,我们一般用它来写Web 服务器,据说知乎就是用Tornado写的. 如果对tornado源码不是很了解,可以先看一下另一篇文章: http://yunji ...
《CSS3秘籍》（第三版）-读书笔记(3)
第9章装饰网站导航 1. 选择要定义样式的链接大部分浏览器都支持4种基本的链接状态:未访问的链接.已访问的链接.访问者的鼠标正悬停在上方的链接,以及正被单击的链接.CSS提供了与这些状态对应的4 ...
DNA Pairing
function pair(str) { //return str; var arr = str.split(''); var pait = ''; var result = arr.map(func ...
POJ2309 -- BST
找找规律,实际上是二分查找的过程,只要找到了mid与输入的n相同的话,直接输出left和right就可以了. 代码如下: #include <iostream> using namespa ...
20145225 《Java程序设计》第2周学习总结
20145225<Java程序设计> 第2周学习总结教材学习内容总结 3.1.1Java的类型分为基本类型(Primitive type)和类类型(Class type) 基本类型: ...
QEMU/KVM功能测试
最近在对QEMU/KVM在HP服务器进行功能测试,项目刚刚启动,遇到不少问题,从Git上拿到最新的source build进行测试,在RHEL7.0a3 + Kernel version3.10 + ...
freeCodeCamp:Truncate a string
截断一个字符串! 如果字符串的长度比指定的参数num长,则把多余的部分用...来表示. 切记,插入到字符串尾部的三个点号也会计入字符串的长度. 但是,如果指定的参数num小于或等于3,则添加的三个点号 ...
手写DataSet,DataTable
一:DataSet DataSet ds = new DataSet();//创建DataSet DataTable dt = new DataTable();//创建一个DataTalbe dt.C ...
关于在xml文件中的 error: invalid symbol: 'switch' 错误
在xml布局文件中使用Switch控件时,出现error: invalid symbol: 'switch'报错,代码如下: <Switch android:id="@+id/swit ...

js/jq宽高的理解与运用

js/jq宽高的理解与运用的更多相关文章

随机推荐

热门专题