javascript - 如果div的底部可见jquery

标签 javascript jquery html css

请在这里帮助我,如果 div 的底部或完整的 div 可见,那么我想向下滚动到下一个 div。这是我试过的代码,

数学上,

var top = $("#myDiv").offset().top;
//top = 1863
var divHeight = $("#myDiv").height();
//divHeight = 571
var total = top + divHeight;
//total = 2434
if($('#myDiv').css('height',total).visible(true))
  {
   alert('hi');
   // I need to alert only if the full div is visible not some part of div
  }
else
{
//if height of myDiv is larger window height (my screen height 640 pixels)
}

如果 html 的所有这一部分(从顶部到 divHeight)或页面底部(这里是总值)都是可见的,那么我需要滚动到下一个 div。 请注意:- if 条件语句中的代码不正确,我想您从中得到了一些想法。

最佳答案

给定 element 您要检查的 jQuery 对象,如果 elementshown,则它是完全可见的并且其布局框的所有 4 个边都落在窗口视口(viewport)内。

注意:以下解决方案假设element与文档根之间不存在可滚动溢出的元素,否则计算方式更复杂。

function isFullyVisible(element) {
    var offset = element.offset();
    var scrollTop = $(document).scrollTop();
    var scrollLeft = $(document).scrollLeft();

    return element.is(":visible") && // shown
        offset.top >= scrollTop && // top
        offset.left >= scrollLeft && // left
        offset.top + element.outerHeight() <= scrollTop + $(window).height() && // bottom
        offset.left + element.outerWidth() <= scrollLeft + $(window).width(); // right
}

如果不关心边,可以只保留相应的子表达式。

关于javascript - 如果div的底部可见jquery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48461869/

相关文章:

javascript - div 在页面加载或刷新时加载 css 的问题

javascript - Handlebars.js 和链接标签

ajax - 是否可以使用 Ajax 在同一页面中进行 Webmatrix CRUD

jquery - 是否有模拟 Facebook 游览的 jQuery 插件?

jquery - 使用 jQuery 防止用户在文本框中输入非数字

javascript - 允许 dragstart-Event 而不会失去其他控件的焦点

javascript - 在 react.js 的脚本标签中使用 javascript SDK

javascript - Html2Canvas 无法在 Google Chrome 上运行

javascript - 我的jQuery函数只能第一次运行

javascript - 使用 lodash 反转范围