div的内容被滚动删除

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 ）都将被删除。 谁知道，是什么引起了这个问题？
感谢您的帮助。 （您可以在这里查看我的网站）

Answer 1

使用.html('')会将html设置为空。 您可以使用.html()来获取html内容。 不确定为什么会需要这样做，尽管选择器已经在这样做了。

Answer 2

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

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

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

谢谢，很高兴它对您有所帮助。 :)