Question

来自网络开发不那么黑暗的一面的问候！

我正在整理我的网络开发组合。它由一系列图像组成，类似于幻灯片放映。当我滚动时，它会捕捉到下一张幻灯片。该系统运作良好。

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

这就是我需要你帮助的地方。我需要找到一种方法来使用jQuery和Javascript来计算div .body-container中最明显的子元素。我需要在屏幕上找到哪个div具有渲染最多的像素。有了这个，我可以找出将它捕捉到哪个幻灯片，并最终修复困扰两段代码的错误。

守则

HTML：

<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>

CSS：

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;
}

JS：

$.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);
            });

        });

可以在以下网址找到现场演示：

https://andrewrobinson-cheapskate01.c9users.io/index.html

如何通过jQuery找到div中最明显的子元素

0 个答案: