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 ...
随机推荐
- [jQuery]最新的 3.0 已发布
可以从 https://code.jquery.com/jquery/#jquery-all-1.x 找到历史版本 1.12.4 是支持 IE6 - 8 的最高版本. 下载地址 http://file ...
- cocos2d-x 之 CCArray 源码分析(2)
cocos2d-x 自己实现了一个数组CCArray ,下面我们来分析一下CCArray的源码 CCArray继承CCObject,所以,CCArray也具有引用计数功能和内存自动管理功能. 数组的源 ...
- tomcat 支持ssi功能配置
1.SSI是Server Side Includes 的缩写,是嵌入到HTML页面的一组指令的集合.在返回请求的页面(包含SSI指令前),服务器会处理这些指令,并用处理的结果替换指令,然后把页面返回. ...
- vim基础使用
vim的常用模式有分为命令模式,插入模式,可视模式,正常模式.本教程中,只需要用到正常模式和插入模式.二者间的切换即可以帮助你完成本指南的学习. 进入方法: vim xxx.xml 正常模式 正常模式 ...
- Java 第三章 选择结构1
选择结构(一) 会使用基本的 if 选择结构 掌握逻辑运算符,掌握多重 if 选择结构 , 掌握嵌套 if 选择 结构 为什么需要 if 选择结构 例如: 如果张浩的 java 考试成绩大于 98分, ...
- [转载]理解HTML语义化
声明: 本文转载于:freeyiyi1993博客. 原文地址:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是HTML语义化? < ...
- Oracle数据库11g基于rehl6.5的配置与安装
REDHAT6.5安装oracle11.2.4 ORACLE11G R2官档网址: http://docs.oracle.com/cd/E11882_01/install.112/e24326/toc ...
- border-radius(边框半径)
可以使用像素来指定border-radius的属性值使角变圆 除了像素,你还可以使用百分比来指定border-radius边框半径的值
- Win7 远程 Ubuntu 桌面 mate desktop，并实现中文输入法
一. 安装mate desktop: $sudo apt-add-repository ppa:ubuntu-mate-dev/ppa $sudo apt-add-repository ppa:ubu ...
- 【转载】-- vi/vim使用
vi/vim 基本使用方法本文介绍了vi (vim)的基本使用方法,但对于普通用户来说基本上够了!i/vim的区别简单点来说,它们都是多模式编辑器,不同的是vim 是vi的升级版本,它不仅兼容vi的所 ...