Question

在我的html页面中，这是一个加载更多的类。<p class="load-more">Load more</p>。当用户向下滚动到此div时，我需要执行一个功能。例如，我需要警告＆＃34;嗨＆＃34;。为此，我使用了以下代码。

$(window).scroll(function() {
    var hT = $(".load-more").offset().top,
        hH = $(".load-more").outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
    if (wS > (hT+hH-wH)){
        alert("Hi");
    }
});

但是这里警报工作不止一次。即警报重复4.5次。为什么会这样？我看到了这个答案Run jQuery event only once after a condition matches，但它没有用。

请看这个js小提琴https://jsfiddle.net/4cfjq1tg/2/。在这里，当我们向下滚动到底部时，它会不止一次警告。

Here what i need is

如何在某些条件下执行某些功能？例如，当向下滚动以加载更多时，我需要检查css显示 .load-more的价值。如果负载更多是显示屏警告您好。否则什么都不做

更新

我使用此解决方案解决了这个问题

var in= 0;

$(window).scroll(function(e) {
    var hT = $(".load-more").offset().top,
        hH = $(".load-more").outerHeight(),
        wH = $(window).height(),
        wS = $(this).scrollTop();
   if(in==0){
     if (wS > (hT+hH-wH)){
       if($(".load-modre").css("display")!=="block"){
             alert("hii");
             in ++;
            }
            }  } 

    });

所有积分都将转到FFdeveloper和Farzin Kanzi。

谢谢朋友们

Answer 1

在代码段下面停止提醒多次滚动

您还可以查看链接Auto Load More Data On Page Scroll (jQuery/PHP) 并将结果附加到div

var loading = true;

$(window).scroll(function() {

	var loadMoreTop		= $('.load-more').position().top,
		loadMoreHeight	= $(".load-more").outerHeight(),
		windowScrollTop	= $(window).scrollTop(),
		windowHeight	= $(window).height()
		windowPosition	= windowScrollTop + windowHeight - loadMoreHeight;
		
	if (windowPosition >= loadMoreTop && loading) { 
		alert('Hi');
		loading = false;
	}
	
});

.container {height: 100%;}
.load-more {background: #000; padding: 10px; color: #fff;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
	<ul id="results">
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	  <li>Hi</li>
	</ul>
	<div class="load-more">LOAD MORE...</div>
</div>

Answer 2

滚动页面时

 $(window).scroll(function()...

会多次开火。您可以看到多个警报，这是正常的。

<强>更新：

你做得更好：

var loaded = false;
$(window).scroll(function(e) {
     if(!loaded)
     {
         var hT = $(".load-more").offset().top,
             hH = $(".load-more").outerHeight(),
             wH = $(window).height(),
             wS = $(this).scrollTop();

         if (wS > (hT+hH-wH)){
             if($(".load-modre").css("display")!=="block"){
                 alert("hii");
                 loaded = true;
             }
         }
     }
});

性能也更好，因为在loaded设置为true后，我们在下一个卷轴中没有任何进程。

Answer 3

我在这篇文章中看到的所有解决方案似乎都无法正常运行。

请参阅此帖的接受答案：

Trigger event when user scroll to specific element - with jQuery

似乎工作得很好。

希望这可能是这篇文章的真正解决方案。

jQuery滚动无法正常工作

3 个答案: