首页 > 代码库 > 滚动条相关1
滚动条相关1
1.页面文档滚动条 获取和判断
//1.获取浏览器可视区域的高度 $(window).resize(function () { //使用js //var clientHeight = scrollHelper.getClientHeight(); //使用 jquery var clientHeight = $(window).height(); $(".divFixed").text(clientHeight); }); //2.获取浏览器文档的高度 $(window).resize(function () { //使用js //var docHeight = scrollHelper.getScrollHeight(); //使用jQuery var docHeight = $(document).height(); $(".divFixed").text(docHeight); });
//3.判断当前 滚动条是否 最高,或最低 $(window).scroll(function () { //1.获取当前滚动条位置 var scrollTop = $(window).scrollTop(); var difference = $(document).height() - $(window).height(); if (scrollTop == 0) { $(".divFixed").text("滚动条到了顶端"); } else if (scrollTop == difference) { $(".divFixed").text("滚动条到了底端"); } else { $(".divFixed").text(scrollTop); } }); //4.jquery 动画滚动到 浏览器 顶端 $(‘.divFixed‘).click(function () { $(‘body,html‘).stop(true, false).animate({ scrollTop: 0 }, 1500); }); //5.jquery 动画滚动套 浏览器 底端 $(‘.divFixed‘).click(function () { var difference = $(document).height() - $(window).height(); $(‘body,html‘).stop(true, false).animate({ scrollTop: difference }, 1500); });
2.Div滚动条 获取和判断
var divOne = $(‘.divOne‘); var divTwo = $(‘.divTwo‘); //1.获取div的滚动条的 $(".divTwo").scroll(function (e) { var scrollTop = divTwo.scrollTop(); ////2.获取div的 内容的高度(目前不可用) //var scrollHeight = divTwo.innerHeight(); divOne.text(scrollTop); }); //2.判断滚动条 是否到了底部 var scrollHeight = 0;//滚动条距离总长 var scrollTop = 0;//当前滚动条位置 $(".divTwo").scroll(function () { var height = $(this).height(); scrollHeight = $(this)[0].scrollHeight; scrollTop = $(this).scrollTop(); if (scrollTop + height >= scrollHeight) { divOne.text("滚到底部了"); } else if (scrollTop == 0) { divOne.text("到顶端了"); } });
滚动条相关1
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。