Question

使用jQuery我确定最近的div（最明显的div）。当用户不滚动一秒钟时，它将该div滚动到视图的中心。这完全适用于codepen.io。这是一个片段：

$(function($) {
  $(function() {
    $(window).on('scroll', function() {
      $('.the-divs div').html('').removeClass('most-visible').mostVisible().addClass('most-visible');
      $(function(){
        $(window).scroll(function() {
            clearTimeout($.data(this, 'scrollTimer'));
            $.data(this, 'scrollTimer', setTimeout(function() {
              var vpHeight = $(window).height();
              var divHeight = $(".the-divs div").outerHeight();
              var scrollOffset = (vpHeight - divHeight) / 2;
              $('html, body').animate({
                scrollTop: $("div.most-visible").offset().top - scrollOffset
              }, 500);
              console.log("Not scrolled for 1s");
            }, 1000));
        });
      });
    });
  });

  function getMostVisible($elements) {
    var $element = $(),
      viewportHeight = $(window).height(),
      max = 0;

    $elements.each(function() {
      var visiblePx = getVisibleHeightPx($(this), viewportHeight);

      if (visiblePx > max) {
        max = visiblePx;
        $element = $(this);
      }
    });

    return $element;
  }

  function getVisibleHeightPx($element, viewportHeight) {
    var rect = $element.get(0).getBoundingClientRect(),
      height = rect.bottom - rect.top,
      visible = {
        top: rect.top >= 0 && rect.top < viewportHeight,
        bottom: rect.bottom > 0 && rect.bottom < viewportHeight
      },
      visiblePx = 0;

    if (visible.top && visible.bottom) {
      // Whole element is visible
      visiblePx = height;
    } else if (visible.top) {
      visiblePx = viewportHeight - rect.top;
    } else if (visible.bottom) {
      visiblePx = rect.bottom;
    } else if (height > viewportHeight && rect.top < 0) {
      var absTop = Math.abs(rect.top);

      if (absTop < height) {
        // Part of the element is visible
        visiblePx = height - absTop;
      }
    }

    return visiblePx;
  }

  $.fn.mostVisible = function() {
    return getMostVisible(this);
  }

});

.the-divs div {
    height:120px;
    width:300px;
    margin:10px auto;
    border:10px solid white;
    opacity:0.6;
}

div .most-visible {
    background-color:#16a085;
    transition:.5s ease-in-out;
    transition-delay:1s;
}


html, body {
  height: 100%;
  background: rgba(17,126,104,1);
  background: -moz-radial-gradient(center, ellipse cover, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(17,126,104,1)), color-stop(25%, rgba(17,126,104,1)), color-stop(100%, rgba(1,81,54,1)));
  background: -webkit-radial-gradient(center, ellipse cover, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%);
  background: -o-radial-gradient(center, ellipse cover, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%);
  background: radial-gradient(ellipse at center, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#117e68', endColorstr='#015136', GradientType=1 );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="the-divs">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

在codepen上创建后，我将其复制到我的网站上。会发生什么，一旦我滚动，它会删除我的div中的所有内容。因此，这些div中的所有内容（我的代码段上的.the-divs div）都会被删除。有谁知道，是什么导致了这个问题？
感谢您的帮助。（您可以查看我的网站here）

Answer 1

使用.html('')会将html设置为空。您可以使用.html()来获取html内容。不知道为什么会有这样的需要，因为选择器已经有点了。

Answer 2

这背后的原因是您使用以下代码清空HTML元素：

$('.the-divs div').html('').removeClass('most-visible').mostVisible().add‌Class('most-visible'‌);

.html('')删除您的内容。

谢谢，并且很高兴它帮助了你。：）

div的内容在滚动时被删除

2 个答案: