當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery 判断元素是否在屏幕可见区域内

發布時間：2024/9/19 编程问答 61 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery 判断元素是否在屏幕可见区域内小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

人眼可見區域（document.body.clientWidth，document.body.clientHeight）
網頁可見區域（document.documentElement.clientWidth，document.documentElement.clientHeight）

判斷元素是否在網頁可見區域內

$.fn.isOnHtmlScreen = function(){var win = $(window);var viewport = {top : 0,left : 0};viewport.right = viewport.left + win.width();viewport.bottom = viewport.top + win.height();var bounds = this.offset();bounds.right = bounds.left + this.outerWidth();bounds.bottom = bounds.top + this.outerHeight();return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); };

判斷元素是否在人眼可見區域內

$.fn.isOnVisibleScreen = function(){var win = $(window);var viewport = {top : win.scrollTop(),left : win.scrollLeft()};viewport.right = viewport.left + document.body.clientWidth;viewport.bottom = viewport.top + document.body.clientHeight;var bounds = this.offset();bounds.right = bounds.left + this.width();bounds.bottom = bounds.top + this.height();return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); };

isOnVisibleScreen 示例

<html> <header> <script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript"> $.fn.isOnVisibleScreen = function(){var win = $(window);var viewport = {top : win.scrollTop(),left : win.scrollLeft()};viewport.right = viewport.left + document.body.clientWidth;viewport.bottom = viewport.top + document.body.clientHeight;var bounds = this.offset();bounds.right = bounds.left + this.width();bounds.bottom = bounds.top + this.height();return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));}; function changeBtn() {if (!$('.item:eq(0)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(0)").fadeIn(1000);$(".rightFlatBar div:eq(1)").fadeIn(1000);} else {$(".rightFlatBar div:eq(0)").fadeOut(1000);$(".rightFlatBar div:eq(1)").fadeOut(1000);}if (!$('.item:eq(1)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(2)").fadeIn(1000);} else {$(".rightFlatBar div:eq(2)").fadeOut(1000);}if (!$('.item:eq(2)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(3)").fadeIn(1000);} else {$(".rightFlatBar div:eq(3)").fadeOut(1000);}if (!$('.item:eq(3)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(4)").fadeIn(1000);} else {$(".rightFlatBar div:eq(4)").fadeOut(1000);}if (!$('.item:eq(4)').isOnVisibleScreen()) {$(".rightFlatBar div:eq(5)").fadeIn(1000);} else {$(".rightFlatBar div:eq(5)").fadeOut(1000);} } $(function(){changeBtn();$(window).scroll(changeBtn);$(".rightFlatBar div:eq(0)").click(function(){$('html,body').scrollTop(0);});$(".rightFlatBar div:eq(1)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(0)').offset().top}, 1000);});$(".rightFlatBar div:eq(2)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(1)').offset().top - 30}, 1000);});$(".rightFlatBar div:eq(3)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(2)').offset().top - 30}, 1000);});$(".rightFlatBar div:eq(4)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(3)').offset().top}, 1000);});$(".rightFlatBar div:eq(5)").click(function(){$('html,body').animate({scrollTop:$('.item:eq(4)').offset().top}, 1000);}); }); </script> <style type="text/css"> *{margin:0;} .item{width: 100%;height: 300px;padding: 100px 0 0 100px; } .item:nth-of-type(even){background: #abc;color: #fff; } .item:nth-of-type(odd){background: #fff;color: #333; } .rightFlatBar {position: fixed;right: 5px;bottom: 0px;width: 60px;height: auto; } .rightFlatBar div{display: none;width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid #ececec;border-radius: 5px;transition: .3s;box-shadow: 0px 0px 3px rgba(0,0,0,0.08);text-align:center;line-height: 60px;background: #fff;cursor:hand; }</style> </header><body><div><div class="item"><h1>條目1</h1></div><div class="item"><h1>條目2</h1></div><div class="item"><h1>條目3</h1></div><div class="item"><h1>條目4</h1></div><div class="item"><h1>條目5</h1></div></div><div class="rightFlatBar"><div>頂部</div><div>條目1</div><div>條目2</div><div>條目3</div><div>條目4</div><div>條目5</div></div> </body> </html>

參考

https://www.xuebuyuan.com/171078.html
https://www.cnblogs.com/whb17bcdq/p/6513766.html

可見區域示例

運行效果：

總結

以上是生活随笔為你收集整理的jQuery 判断元素是否在屏幕可见区域内的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：消息称一汽大众计划推出独立新能源品牌，预
下一篇： jQuery scroll事件