js判断滚动条是否到达顶部、底部 兼容各种浏览器

最新推荐文章于 2023-09-11 15:47:02 发布
最新推荐文章于 2023-09-11 15:47:02 发布
阅读量5.6k 收藏 1
点赞数
文章标签： js 滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lijun2247900158/article/details/45672853
版权
这篇博客提供了一段JavaScript代码，用于在不同浏览器中检测滚动条是否到达页面顶部或底部。通过获取窗口高度、滚动条位置和文档高度，实现了在滚动到顶部时显示警告，并在接近页面底部时同样触发警告的功能。
摘要由CSDN通过智能技术生成
<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>iScroll demo: simple</title>   
<script type="text/javascript">  
window.οnscrοll=function(){
最低0.47元/天 解锁文章
明月天国
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浏览器滚动时悬浮，悬浮判断到达底部时固定在某个位置
07-12
浏览器滚动时悬浮，悬浮判断到达底部时固定在某个位置
当滚动条滚动到页面底部自动加载增加内容的js代码
10-25
2. **获取页面状态**：为了判断滚动条是否已经滚动到页面底部，我们需要获取几个关键的页面状态值： - **getScrollTop()**：这个函数用于获取当前滚动条距离顶部的距离。 - **getClientHeight()**：返回浏览器窗口...
jquery判断滚动条是否到达窗口顶部和底部
记录
10-17 5781
var doc_height = $(document).height(); var scroll_top = $(document).scrollTop();  var window_height = $(window).height(); doc_height是文档的高度，scroll_top是滚动条上部离文档顶部的高度，window_height表示窗口高度。 当 scrol
js：判断页面是否有滚动条，滚动条是否处于页面顶部
cxy的博客
04-17 1611
//判断页面是否有滚动条 //document.body.scrollHeight; 内容区域的高度 let flag = document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); if(flag){ //此时内容高度大于页...
jquery判断滚动条是否到达顶部或者底部
gonyulian415的专栏
03-12 245
[size=medium][code="java"]var scroll_top = $(document).scrollTop(); //scroll_top是滚动条上部离文档顶部的高度 var doc_height = $(document).height();//doc_height是文档的高度 var window_height = $(window).height();//windo...
滚动条判断是否滑动到顶部底部
weixin_39037804的博客
10-09 414
/** * [滚动条] */ $(window).scroll(function() { var scrollTop = $(this).scrollTop(); // 滚动条距离顶部的高度 ...
js判断滚动条是否已到页面最底部或顶部实例
11-30
以下将详细介绍如何使用JS判断滚动条是否已经到达页面的底部或顶部。 首先，我们需要理解几个关键的概念： 1. `document.documentElement`: 这个对象代表HTML元素，即整个HTML文档的根元素。 2. `clientHeight` 和 ...
一个用jquery写的判断div滚动条到底部的方法【推荐】
10-22
- 判断条件`if(nScrollTop + nDivHight >= nScrollHight)`检查滚动条是否到达底部。如果满足条件，弹出提示框通知用户滚动条已经到底部。 这个方法适用于检测div元素的滚动状态，尤其适用于那些需要在滚动到底部时...
js滚动条回到顶部的代码
12-10
JavaScript 和 jQuery 滚动条回到顶部的实现 在网页设计中，经常需要提供一个功能，让用户能够方便地将滚动条快速返回到页面顶部。这个功能通常通过点击一个按钮或者执行某个操作来触发。在提供的代码示例中，使用...
Jquery返回顶部代码兼容各种浏览器
05-28
// 当滚动条距离顶部超过100px时显示返回顶部按钮 $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // 点击...
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
08-14
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
JQ判断滚动条是否到达顶部或者底部
wbbott的博客
04-13 1070
JQ判断滚动条是否到达顶部或者底部
vue判断滚动条上下拉及是否在顶部
最新发布
zoeou的博客
09-11 1019
方式1. 使用useScroll方式。方式2. 直接监听dom的scroll事件。
Jquery判断滚动条是否到达窗口顶部和底部
weixin_33918357的博客
09-25 113
为什么80%的码农都做不了架构师？>>> ...
JQ判断页面是否到了浏览器顶部
雷霆随笔
01-07 1429
$(window).on('scroll',function(){ "use strict"; var scrolled = $(window).scrollTop(); if(scrolled &gt; 100){ console.log("离开顶部"); }else{ console.log("到达顶部"); } });  ...
js判断滚动到底或滚动到顶
weixin_44785498的博客
03-18 3163
js判断滚动到底或滚动到顶 原生判断 其中： scrollTop：滚动条滚动时，滚动条上端距离顶部的距离 clientHeight：可视区的高度 scrollHeight：滚动条的总高度（当前可滚动的页面的总高度） window.addEventListener('scroll', scroll) function scroll() { const scrollTop = document.documentElement.scrollTop || document.body.scrollT
js判断滚动条是否已到页面最底部或顶部实例-拓展（逐渐-自动下滑滚动）
qq_14861367的专栏
07-06 1526
/**以下是具体的html*/    /******************** * 取窗口滚动条高度  ******************/ function getScrollTop() { var scrollTop=0; if(document.documentElement&&document.documentElement.scroll
页面滚动到底部，悬浮条固定到页面底部。
鸣人的博客
02-02 1331
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0; padding: 0; } body{height: 2800px;} p{
页面没有出现滚动条时底部悬浮显示到最底部
小耳朵晨晨
12-28 378
$(function(){ //没有滚动条底部样式修改 functionhasScrollbar(){ returndocument.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight); } if(!hasScrollbar()){ $('.layui-foote...
js判断滚动条是否在顶部显示
09-09
要判断滚动条是否在顶部显示，可以使用JavaScript来实现。 一种方法是通过比较滚动条的垂直位置是否等于0来判断是否在顶部。可以使用`window.pageYOffset`来获取滚动条的垂直位置，如果它的值为0，则表示滚动条在顶部显示。 另一种方法是通过判断页面的滚动距离是否小于等于0来判断是否在顶部。可以使用`document.documentElement.scrollTop`来获取文档元素的滚动距离，如果它的值小于等于0，则表示滚动条在顶部显示。 下面是使用第一种方法的示例代码： ```javascript function isScrollAtTop() { var scrollTop = window.pageYOffset || document.documentElement.scrollTop; return scrollTop === 0; } console.log(isScrollAtTop()); // 打印true表示滚动条在顶部显示 ``` 下面是使用第二种方法的示例代码： ```javascript function isScrollAtTop() { var scrollTop = document.documentElement.scrollTop; return scrollTop <= 0; } console.log(isScrollAtTop()); // 打印true表示滚动条在顶部显示 ``` 以上就是用JavaScript判断滚动条是否在顶部显示的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值