Javascript 如何通过jQuery找到div中最可见的子元素_Javascript_Jquery_Html

Javascript 如何通过jQuery找到div中最可见的子元素

javascript jquery html

Javascript 如何通过jQuery找到div中最可见的子元素,javascript,jquery,html,Javascript,Jquery,Html,来自web开发不那么黑暗的一面的问候我正在整理我的web开发投资组合。它由一系列图像组成，有点像幻灯片放映。当我滚动时，它会捕捉到行中的下一张幻灯片。该系统运行良好现在，我添加了一个拖动到滚动的机制，它可以工作，只是与我为它制作的其他插件不完全兼容那就是我需要你帮助的地方。我需要找到一种使用jQuery和Javascript计算div.body容器的最可见子元素的方法。我需要找到哪个div在屏幕上渲染的像素最多。有了它，我可以找到将它捕捉到哪个幻灯片，并最终修复困扰这两段代码的bug 代

来自web开发不那么黑暗的一面的问候

我正在整理我的web开发投资组合。它由一系列图像组成，有点像幻灯片放映。当我滚动时，它会捕捉到行中的下一张幻灯片。该系统运行良好

现在，我添加了一个拖动到滚动的机制，它可以工作，只是与我为它制作的其他插件不完全兼容

那就是我需要你帮助的地方。我需要找到一种使用jQuery和Javascript计算div

.body容器的最可见子元素的方法。我需要找到哪个div在屏幕上渲染的像素最多。有了它，我可以找到将它捕捉到哪个幻灯片，并最终修复困扰这两段代码的bug

代码
HTML:
JS:
$.fn.isVisible=函数（）{
var rect=此[0]。getBoundingClientRect（）；
返回(
（矩形高度>0 | |矩形宽度>0）&&
rect.bottom>=0&&
rect.right>=0&&
rect.top这个任务只是查找宽度乘以高度（ele.width（）*ele.height（）
）在.body container中的每个元素中，使用for循环并确定哪个元素具有最好的产品？不，所有元素都是相同的，我试图指出的是在用户滚动后的任何给定时刻，哪个元素占据了更多的屏幕。
<body>
    <div class="body-container" style="top:40px">
        <div class="section one">

        </div>
        <div class="section two">

        </div>
        <div class="section three">

        </div>
        <div class="section four">

        </div>
        <div class="section five">

        </div>
    </div>
</body>

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  border-left: 40px solid white;
  border-right: 40px solid white;  
}

body:before, body:after {
    content: "";
    position: fixed;
    background: white;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 1000;
}

body:before {
    top: 0;
}

body:after {
    bottom: 0;
}

.body-container {
  width: calc(100% - 80px);
  overflow: inherit;
  position: absolute;
  height: 500vh;

  -webkit-transition: top 300ms ease;
  -moz-transition: top 300ms ease;
  -ms-transition: top 300ms ease;
  -o-transition: top 300ms ease;
  transition: top 300ms ease;
}

.section {
  width: 100%;
  height: 100vh;
}

.one {
  background: url(../img/one.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.two {
  background: url(../img/two.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.three {
  background: url(../img/three.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.four {
  background: url(../img/four.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.five {
  background: url(../img/five.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

$.fn.isVisible = function() {
            var rect = this[0].getBoundingClientRect();
            return (
                (rect.height > 0 || rect.width > 0) &&
                    rect.bottom >= 0 &&
                    rect.right >= 0 &&
                    rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
                    rect.left <= (window.innerWidth || document.documentElement.clientWidth)
            );
        };

        $(function() {

            var slide = 1;
            var scrlHeight;

            $(window).on('wheel', function(e) {
                var delta = e.originalEvent.deltaY;
                if (delta > 0) {
                    if (slide != 5) {
                        slide = slide + 1;
                        scrlHeight = slide * -100 + 100 + "vh";
                        $('.body-container').css('top', 'calc(' + scrlHeight + ' + 40px)');
                    }
                } else {
                    if (slide != 1) {
                        slide = slide - 1;
                        scrlHeight = slide * -100 + 100 + "vh";
                        $('.body-container').css('top', 'calc(' + scrlHeight + ' + 40px)');
                    }
                }
            });

            var mState = 0;
            var posX = 0;
            var posY = 0;

            $(window).mousemove(function(m){
                if(mState === 1){
                    $(window).scrollTop($(window).scrollTop() + (posY - m.pageY)); 
                    $(window).scrollLeft($(window).scrollLeft() + (posX - m.pageX));
                }
            });

            $(window).mousedown(function(m){
                mState = 1;
                posY = m.pageY;
                posX = m.pageX;
            });

            $(window).mouseup(function(){
                mState = 0;
                $('body').html($('.body-container').mostVisible);
            });

        });