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宽高的理解与运用的更多相关文章

  1. JS/jQuery宽高的理解和应用

    1.widows:窗口.window对象可省略 2.document对象是window对象的一部分 浏览器的Html文档成为Document对象 window.location===document. ...

  2. js各种宽高(1)

    在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...

  3. 关于html中的设置body宽高的理解

    有时候看到别人的代码中经常出现在body中设置的宽高,不是很理解,于是自己测试了下,瞬间懂了,废话不多说,直接上代码: 首先创建好一个基本的html文件,设body的背景色为red: 相信大家都知道效 ...

  4. JS 各种宽高

    1.window的各种宽高   outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览 ...

  5. 原生js获取宽高与jquery获取宽高的方法的关系

    说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况.  2.以下所说的所有方法与属性所返回的值都是不带单位的.  3.为了方便说明,以下情况采用缩写表示:  obj -> ...

  6. js各种宽高(2)

    在javascript和jquery中,都有对各种高度的写法,在这里,我们就着重讲一下窗口.文档等高度的理解.(宽度和高度差不多!) jquery的各种高度 首先来说一说$(document)和$(w ...

  7. js 浏览器 宽高 各种

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度   if (window.innerWidth)   winWidth = window.innerWidth;   else if ((do ...

  8. js常用宽高属性

    document.body.clientWidth //body对象的宽度 document.body.clientHeight //body对象的高度 document.documentElemen ...

  9. js获取宽高

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

随机推荐

  1. Java总结——文件&amp;流

    最近学习了Java的输入输出,脑子里有两点乱,不过比之前的思路好像清晰了很多.脑子刚刚接收这些信息的时候,整个就是懵逼的,又是文件又是流的,文件到底干嘛的,流到底干嘛的?恩,后来,想了想,其实也不难理 ...

  2. sql server和mysql中分别实现分页功能

    MySQL 在MySQL中,可以用 Limit 来查询第 m 列到第 n 列的记录, 例如: select * from tablename limit m, n sql="select * ...

  3. Storm与Spark:谁才是我们的实时处理利器

    Storm与Spark:谁才是我们的实时处理利器 ——实时商务智能目前已经逐步迈入主流,而Storm与Spark开源项目的支持无疑在其中起到了显著的推动作用.那么问题来了:实时处理到底哪家强? 实时商 ...

  4. Bundle文件的创建和使用(二)

    1.概念: An NSBundle object represents a location in the file system that groups code and resources tha ...

  5. 浅谈iOS网络编程之一入门

    计算机网络,基本上可以抽象是端的通信.实际在通讯中会用到不同的设备,不同的硬件中,为了能友好的传输信息,那么建立一套规范就十分必要了.先来了解一些基本概念 了解网络中传输的都是二进制数据流.  2.了 ...

  6. Autodesk 2015全套密钥

    Below is a list for collecting all the Autodesk 2015 Product Keys:      [*]AutoCAD 2015 001G1      [ ...

  7. stm32中断学习总结

    经过了两天,终于差不多能看懂32的中断了,由于是用的库函数操作的,所以有些内部知识并没有求甚解,只是理解知道是这样的.但对于要做简单开发的我来说这些已经够了. 我学习喜欢从一个例程来看,下面的程序是我 ...

  8. Nodejs使用redis

    安装方法 安装redis方法请自行百度, 用npm方法,安装nodejs的redis模块 npm install redis 实战 var redis = require("redis&qu ...

  9. 【iCore1S 双核心板_ARM】例程六:WWDG看门狗实验——复位ARM

    实验原理: STM32内部包含窗口看门狗,通过看门狗可以监控程序运行,程序错误 时,未在规定时间喂狗,自动复位ARM.本实验通过按键按下,停止喂狗, 制造程序运行 错误,从而产生复位 . 实验现象: ...

  10. FFMPEG 中dts和pts区别

    FFMPEG 中dts和pts区别     CopyFrom:http://www.cnblogs.com/yinxiangpei/articles/3892982.html 视频的显示和存放原理 对 ...