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("到顶端了"); } });
时间: 2024-11-05 19:31:22