获取可视区尺寸、获取滚动距离

最新推荐文章于 2022-05-25 10:10:31 发布
最新推荐文章于 2022-05-25 10:10:31 发布
阅读量366 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sundanping_123/article/details/100253359
版权

在这里插入图片描述
获取可视区尺寸

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			console.log('可视区的宽度：'+$(window).width() );

			console.log('可视区的高度：'+$(window).height() );

			console.log('文档的宽度'+$(document).width() );

			console.log('文档的高度：'+$(document).height() );


		})



	</script>
</head>
<body>
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />


</body>
</html>

在这里插入图片描述
可以看出 可视区和文档的宽、高是不一样的。
获取滚动距离：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		body{
			margin:0;
		}

		.banner{
			width:960px;
			height:200px;
			background-color:cyan;
			margin:0 auto;
		}

		.menu{
			width:960px;
			height:80px;
			background-color:gold;
			margin:0 auto;
			text-align:center;
			line-height:80px;
		}

		.menu_back{
			width:960px;
			height:80px;
			margin:0 auto;
			display:none;
		}

		p{
			text-align:center;
			color:red;
		}

		.totop{
			width:60px;
			height:60px;
			background-color:#000;
			color:#fff;
			position:fixed;
			right:20px;
			bottom:50px;
			line-height:60px;
			text-align:center;
			font-size:40px;
			border-radius:50%;
			cursor:pointer;
			display:none;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$menu = $('.menu');
			$menu_back = $('.menu_back');
			$totop = $('.totop');

			$(window).scroll(function(){
				//console.log('abc');

				var iNum = $(document).scrollTop();
				//document.title = iNum;

				if(iNum>200)
				{
					$menu.css({
						'position':'fixed',
						'left':'50%',
						'top':0,
						'marginLeft':-480
					});

					$menu_back.show();
				}
				else
				{
					$menu.css({
						'position':'static',						
						'marginLeft':'auto'
					});

					$menu_back.hide();
				}


				if(iNum>400){
					$totop.fadeIn();
				}
				else
				{
					$totop.fadeOut();
				}

			})
			$totop.click(function(){
				$('html,body').animate({'scrollTop':0});
			})


		})



	</script>
</head>
<body>
	<div class="banner"></div>
	<div class="menu">菜单</div>
	<div class="menu_back"></div>

	<div class="totop">↑</div>

	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />

</body>
</html>

在这里插入图片描述
在这里插入图片描述

小哦--
关注
专栏目录
滚动距离、可视窗口大小的获取以及兼容模式写法
weixin_43933771的博客
07-16 511
获取滚动距离的兼容模式写法 常规方法： （1）window.pageXOffset/pageYOffset （注意：IE8及以下是不支持的） （2）document.body.scrollLeft/scrollTop （注意：IE8及以下是支持的） （3）document.documentElement.scrollLeft/scrollTop （注意：IE8及以下是支持的） （4）window.scrollX/scrollY 兼容模式的封装写法： <script> //我们还是在这
JS获取滚动条到底部得距离
YingUser的博客
05-28 1649
// 监听滚动 FirstPage 是父组件传过来的值 判断调用哪个的 addEvent() { window.addEventListener( 'scroll', this.type == 'FirstPage' ? this.firstPageScrollEvent : this.scrollDomScrollEvent ); }, // 滚动出首页则展示 firstPageScrollEvent(..
获取浏览器滚动距离
weixin_33935777的博客
08-01 251
1 /** 2 * 获取浏览器滚动距离 3 */ 4 function getScrollOffset() { 5 if (window.pageXOffset) { 6 return { 7 x: window.pageXOffs...
获取元素样式对象 页面滚出 页面可是大小 添加监听事件 获取事件参数浏览器中位置 的兼容...
weixin_30553837的博客
08-16 62
/** * 获取浏览滚动出去的距离 * @returns {{scrollY: (Number|number), scrollX: (Number|number)}} */function scroll(){ return{ scrollY:window.scrollY||document.body.scrollTop||document.documentElement.scr...
Element属性 ：获取，设置元素滚动距离，scrollHeight,scrollTop, scrollLeft属性详解
m0_37158404的博客
05-25 4163
Element.scrollTop - Web APIs | MDN Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。 scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性），scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop被设为0 如果设置了超出这个容器可滚动的值,scrollTop会被设为最大值。
react中监听页面滚动的高度以及横向滚动的位置
雷佳佳的博客
03-07 8843
//首先在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理 componentDidMount() { window.addEventListener('scroll', this.bindHandleScroll) } bindHandleScroll=(e)=>{ // 滚动的高度(兼容多种浏览器) const scro...
获取元素到页面最左侧的距离（滑块）
印第安米饭
10-19 6082
主要用到offsetParent 　　function getElementLeft(element){ 　　　　var actualLeft = element.offsetLeft; 　　　　var current = element.offsetParent; 　　　　while (current !== null){ 　　　　　　actualLeft += current.offsetL...
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
10-17
首先，我们来看如何获取可视区尺寸和文档尺寸。在JavaScript和jQuery中，`$(window).width()` 和 `$(window).height()` 分别用于获取当前窗口（可视区）的宽度和高度。而`$(document).height()` 和 `$(document)....
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
10-27
这些尺寸信息包括可视区域的高度和宽度、整个网页内容的高度和宽度、浏览器窗口的内部高度和宽度，以及滚动条的尺寸。不同的浏览器以及浏览器的不同版本可能会在获取这些尺寸时有所差异。了解如何正确获取这些信息...
JavaScript获取浏览器尺寸与滚动位置
文章列出了多种JavaScript方法来获取不同类型的页面、窗口和屏幕尺寸，如可见区域宽高、全宽高、滚动位置以及屏幕分辨率等。作者还表达了对众多相似概念的理解困难，但他通过整理和抽象，创建了针对页面、窗口的属性...
CSS3动画实现左右滚动效果
chenlim87的博客
09-17 4960
CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。项目中一些比较酷炫的页面效果就是CSS3做出来的。今天我们做一个简单的左右滚动的动画效果。 效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=devi.
脚本化CSS（获取窗口的滚动距离、获取窗口的尺寸）
巧克力很苦的小博客
09-06 2276
窗口的滚动距离 如何获取当前滚动条的位置？？ window.pageYOffset 获取浏览器窗口Y轴滚动的当前距离IE8以上 console.log(window.pageYOffset); window.pageXOffset 获取浏览器窗口X轴滚动的当前距离IE8以上 console.log(window.pageXOffset); ...
dom元素滚动条高度 js_js获取元素的滚动高度，和距离顶部的高度
weixin_39827036的博客
12-22 2019
jq：获取浏览器显示区域(可视区域)的高度 ：$(window).height();获取浏览器显示区域(可视区域)的宽度 ：$(window).width();获取页面的文档高度$(document).height();获取页面的文档宽度 ：$(document).width();浏览器当前窗口文档body的高度：$(document.body).height();浏览器当前窗口文档body的宽度...
获取当前页面滚动了多少距离
qq_44361433的博客
04-02 6808
window.onscroll=()=>{ console.log(document.documentElement.scrollTop); } 获取当前元素距离最顶层有多高 function getTotalTop(elem){ var sum=0; do{ sum+=elem.offsetTop; elem=elem.offsetParent; ...
获取元素距离页面可视区域的位置
weixin_30550271的博客
04-23 4064
原生js获取 一个dom元素距离页面可视区域的位置值getBoundingClientRect();这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。var box=document.getElementById('box'); // 获取元素alert(box.getBoundingClientRect().top); /...
UI设计师必备|Web设计尺寸规范
热门推荐
awayaya1的博客
10-16 1万+
关于网页UI设计规范、网页布局和如何提升网页用户体验设计的素材模板，到 乐于分享UI|UX的 搜UI (SOOUI) 网页UI设计规范 1. 网页规范： 网页宽度为1920 高度不限，有效可视区：950px~1200px宽度，具体尺寸根据项目，客户要求以及用户群决定。 首屏高约为700-750PX 主体内容区域1200PX。 文档建立：文件宽度为1920PX 高度不限，RGB颜色模式， 分辨率72 2. 字体规范： 中文常用字体：宋体-字体样式（无）、微软雅黑-字体样式（Windows.
获取滚动条高度和可视区域高度的兼容写法
weixin_41726565的博客
09-04 1374
//获取滚动条的高度 function getscolloffset(){ if(window.pageXOffset){ return{ x:window.pageXOffset, y:window.pageYOffset } }else{ return{ x:...
原生js底层基础（十八）JavaScript 滚动条距离、可视区域宽高、元素尺寸、让滚动条移动
爱吃葡萄的小菠萝
11-01 1363
1.获取滚动条距离 window.pageXOffset ( pageYOffset )(IE8及IE8以下不兼容) IE8及IE8以下能兼容的方法 1.document.body.scrollLeft ( scrollTop ) 2.document.documentElement.scrollLeft (scrollTop ) 两个方法的兼容性比较混乱，但是他们两个互斥，不会两个同时兼...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值