jquery获取滚动条高度和位置

一、jquery获取滚动条高度和位置

1、首先打开hbuilder编辑器，新建一个HTML文档，里面输入长篇的文字。

2、然后在上方引入jQuery的脚本，编辑js脚本，使用bind方法绑定浏览器的scroll事件，监听网页滚动，之后用scrollTop()获取垂直滚动距离，最后弹出输出的值即可。

3、保存一下打开浏览器，可以看到一个长篇的文档。

4、按F12打开浏览器开发者工具，切换到Console标签下，滚动鼠标，就可以在开发者工具里显示出浏览器高度位置的数据了。

二、怎么样用JS 控制竖向滚动条的高度。 急! 急~

1、点击链接之后如果内容还在当前页面你这一直接用a标签的锚点进行滚动

2、如果点击连接之后打开新的页面可以这么做

3、<ahref="B.html?id='jaoke'">教科书</a>

4、<ahref="B.html?id='caipu'">菜谱</a>

5、<ahref="B.html?id='kepu'">科普</a>

注意上面连接到B页面传的id，然后把id传给B页面的input

6、注意上面连接到B页面传的id，然后把id传给B页面的input

7、<inputtype="hidden"id="text1"value="从A页面传过来的id"/>

8、<divid="jiaoke">这是教科书区域</div>

9、<divid="caipu">这是菜谱区域</div>

10、<divid="kepu">这是科普区域</div>

B页面脚本方面:

11、$(document).ready(function(e){

12、vardocHeight=$(document).height();//获取页面总高度

13、varwinHeight=$(window).height();//获取页面显示区域高度

14、varTop=$("#"+id).offset().top;//获取所看区域距离上部的高

15、return;//如果页面没有滚动条就退出

16、if((docHeight-winHeight)<=Top)

17、$(document).scrollTop(docHeight-winHeight);

18、})

//大概写法是这样，可能细节方面还有点欠缺，我上面使用的jquery，使用jquery的时候记得要链接jquery文件

19、//大概写法是这样，可能细节方面还有点欠缺，我上面使用的jquery，使用jquery的时候记得要链接jquery文件

三、JS获取body的高度

1、document.body.clientWidth;//网页可见区域宽

2、document.body.clientHeight;//网页可见区域高

3、document.body.offsetWidth;//网页可见区域宽(包括边线的宽)

4、document.body.offsetHeight;//网页可见区域高(包括边线的高)

5、document.body.scrollWidth;//网页正文全文宽

6、window.screen.availHeight;//屏幕可用工作区高度

7、window.screen.availWidth;//屏幕可用工作区宽度

8、alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度包括border padding margin

9、alert($(document.body).width());//浏览器时下窗口文档body的高度

1、alert($(window).height());//浏览器时下窗口可视区域高度

2、alert($(document).height());//浏览器时下窗口文档的高度

3、alert($(document.body).height());//浏览器时下窗口文档body的高度

4、alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度包括border padding margin

5、alert($(window).width());//浏览器时下窗口可视区域宽度

6、alert($(document).width());//浏览器时下窗口文档对于象宽度

7、alert($(document).scrollTop());//获取滚动条到顶部的垂直高度

8、alert($(document).scrollLeft());//获取滚动条到左边的垂直宽度