1、jquery获取滚动条高度使用scrollTop()方法。
2、首先我们新建一个长篇的HTML文档。
3、然后我们编辑JS脚本，使用scroll()方法，监听网页滚动。
4、然后我们使用scrollTop()获取垂直滚动距离。
5、然后保存文件，查看获取的垂直滚动距离即可。
$(document)ready(function(){
alert($(window)height()); //浏览器当前窗口可视区域高度
alert($(document)height()); //浏览器当前窗口文档的高度
alert($(documentbody)height());//浏览器当前窗口文档body的高度
alert($(documentbody)outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window)width()); //浏览器当前窗口可视区域宽度
alert($(document)width());//浏览器当前窗口文档对象宽度
alert($(documentbody)width());//浏览器当前窗口文档body的高度
alert($(documentbody)outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
alert(screenheight);//显示器分辨率，只能用JavaScript代码获
alert(screenwidth);
});
上面的方法可以根据自己的需求选择一个合适的，
然后。获取固定层的大小：
var fixedWidth = $("#fixed")width();var fixedHeight = $("#fixed")height();
最后赋给textarea：
$("#textarea")width(bodyWidth - fixedWidth);$("#textarea")height(bodyHeight - fixedHeight);
可以使用offset() 方法，该方法返回或设置匹配元素相对于文档的偏移（位置），该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
1、使用offset() 方法获取一个元素距离浏览器的顶部和左边的可视距离，代码如下：
<html><head>
<script type="text/javascript" src="/jquery/jqueryjs"></script>
<script type="text/javascript">
$(document)ready(function(){
$("button")click(function(){
x=$("p")offset();
$("#span1")text(xleft);
$("#span2")text(xtop);
});
});
</script>
</head>
<body>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
</body>
</html>
2、运行的结果如下：
用jq的话 你可以这样改改
<script type="text/javascript">
function initMainHeight(){
let Mainheight = $(window)height();
if(Mainheight>1){
$("main_bg")css({height:Mainheight+"px"});}
}
$(document)ready(initMainHeight);
$(window)on("resize",initMainHeight);
</script>
不过你这个效果完全就可以用css实现
可以这样写
main_bg{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
你用jq的时候是在页面加载的时候就获取了，并不是点击的时候获取的。时机不对。
$('#btn2')click(function () {var boxAheight = $("#frame_content")outerHeight(true);
alert(boxAheight);
})
以上就是关于jquery获取滚动条高度和位置全部的内容，包括:jquery获取滚动条高度和位置、JQ 怎么给一个<textarea></textarea>一个动态的高度、jquery获取元素距离浏览器顶部的可视高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）