jQuery滚动无法正常工作[重复]答案

【问题标题】：jQuery scroll not working properly [duplicate]jQuery滚动无法正常工作[重复]
【发布时间】：2017-05-14 13:01:51
【问题描述】：

在我的 html 页面中有一个加载更多的类。<p class="load-more">Load more</p>。当用户向下滚动到这个 div 时，我需要执行一个函数。例如，我需要提醒“嗨”。为此，我使用了以下代码。

$(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 fiddle https://jsfiddle.net/4cfjq1tg/2/。在这里，当我们向下滚动到底部时，它不止一次提醒您。

Here what i need is

如何在特定条件下执行某些功能？例如，当向下滚动以加载更多内容时，我需要检查 CSS 显示 .load-more 的值。如果加载更多是显示块警报 Hi 。否则什么都不做

更新

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

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。

谢谢朋友们

【问题讨论】：

请给我们更多的细节。也许您的问题出在代码的其他部分，因为这部分对我有用。 JSFiddle：jsfiddle.net/4cfjq1tg/1
这也是问题。请参阅jsfiddle.net/4cfjq1tg/2。当您向下滚动时，它会多次提醒您
@FFdeveloper 你能写下答案以便我接受吗？我通过你的 js fiddle jsfiddle.net/4cfjq1tg/5 找到了这个逻辑
@abilash er 逻辑无法正常工作。我发现另一个似乎有效的帖子，我用链接回答了

标签： javascript jquery html css

【解决方案1】：

下面的代码 sn-p 在滚动时停止多次警报

您也可以查看链接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>

【讨论】：

【解决方案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后，我们在下一个滚动中没有任何进程。

【讨论】：

那我该如何执行一些条件？例如，当向下滚动以加载更多时，我需要检查 .load-more 的 css 显示值。如果那个 load-more 是 display block alert hi 。否则什么都不做/
某些条件或css更改没有重复问题。它们不同于必须只显示一次的警报。您可以看到许多具有滚动功能以隐藏/显示顶部菜单的网页。例如scrollTop > 200 上的顶部菜单显示它会重复但没有任何问题。我会给你找一些样品。
你可以看到这个：stackoverflow.com/questions/32480694/…
我的英文不好，但刚才我找到了你想要的。要加载更多，它必须只触发一次。所以你可以使用布尔值if(this).scrollTop() > 200) myBoolean = true; 当页面达到滚动值时设置你的布尔值为真，你可以使用它来检查是否需要load more。布尔值从false 更改为true，但从不回溯到false。
请看我的更新:)

【解决方案3】：

我在这篇文章中看到的关于这个问题的所有解决方案似乎都无法正常工作。

请参阅此帖子的已接受答案：

Trigger event when user scroll to specific element - with jQuery

似乎工作得很好。

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

【讨论】：