博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
获取浏览器顶部距离,可见距离,屏幕宽度,滚动条保持状态,滚动条距离顶部,底部的距离,屏幕分辨率等...
阅读量:6428 次
发布时间:2019-06-23

本文共 1444 字,大约阅读时间需要 4 分钟。

hot3.png

本文章不定时更新

浏览器:

 var s = "";    s += " 网页可见区域宽:" + document.body.clientWidth + "\n";    s += " 网页可见区域高:" + document.body.clientHeight + "\n";    s += " 网页可见区域宽:" + document.body.offsetWidth + " (包括边线和滚动条的宽)" + "\n";    s += " 网页可见区域高:" + document.body.offsetHeight + " (包括边线的宽)" + "\n";    s += " 网页正文全文宽:" + document.body.scrollWidth + "\n";    s += " 网页正文全文高:" + document.body.scrollHeight + "\n";    s += " 网页被卷去的高(ff):" + document.body.scrollTop + "\n";    s += " 网页被卷去的高(ie):" + document.documentElement.scrollTop + "\n";    s += " 网页被卷去的左:" + document.body.scrollLeft + "\n";    s += " 网页正文部分上:" + window.screenTop + "\n";    s += " 网页正文部分左:" + window.screenLeft + "\n";    s += " 屏幕分辨率的高:" + window.screen.height + "\n";    s += " 屏幕分辨率的宽:" + window.screen.width + "\n";    s += " 屏幕可用工作区高度:" + window.screen.availHeight + "\n";    s += " 屏幕可用工作区宽度:" + window.screen.availWidth + "\n";    s += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色" + "\n";    s += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸" + "\n";    alert(s);

元素:

 元素距离顶部距离document.getElementById(id).offset().top 元素距离左边距离document.getElementById(id).offset().left  可根据需求改为Jquery
滚动条:
$(window).scrollTop();  //得到滚动条距离顶部的距离。 //设置滚动条距离顶部或底部的距离,保持滚动条状态等$(window).scroll( function() {   var screenheight = window.screen.availHeight; //获取屏幕高   $(window).scrollTop( document.body.clientHeight-120-screenheight);//移动到据底部120px  } );

转载于:https://my.oschina.net/oospace/blog/357177

你可能感兴趣的文章
移动互联网下半场,iOS开发者如何“高薪”成长?
查看>>
书评:实战Apache JMeter
查看>>
又拍云 CDN 全网实时、精准化监控技术实践
查看>>
Java 20年:转角遇到Go
查看>>
BagNet超越 AlexNet,在ImageNet 上实现最先进结果!
查看>>
如何通过解决精益问题提高敏捷团队生产力
查看>>
TDD容易被忽略的五大前提
查看>>
记TensorFlow项目开源一周年
查看>>
WCF与ASP.NET Core性能比较
查看>>
Chrome和HTTPS:安全Web的征途
查看>>
Firefox Quantum支持跨浏览器插件架构
查看>>
Terratest:一个用于自动化基础设施测试的开源Go库
查看>>
C# API中的模型和它们的接口设计
查看>>
腾讯58篇论文入选CVPR 2019,涵盖视觉对抗学习等方向
查看>>
区块链和数据科学:如果同时应用这两种技术,将会实现什么?
查看>>
Netflix Play API:我们为什么构建了一个演进式架构?
查看>>
腾讯云携手SENSORO,为城市安全保驾护航
查看>>
C# 8中的默认接口方法
查看>>
EF Core 2.1路线图:视图、GROUP BY和惰性加载
查看>>
当编程语言掌握在企业手中,是生机还是危机?
查看>>