Question

我将滚动绑定到具有某种逻辑的元素

$(".elem").scroll(function(){
 some logic
});

代码的其他地方我需要滚动到元素的顶部，但不触发滚动事件

$(".elem").scrollTop(0)

这可能吗？

Answer 1

您可以使用以下内容：

$(document).ready(function(){
    var disable_scroll = false;
    $(window).scroll(function(event) {
        if(disable_scroll == false){
            //your scroll code goes here..
        }
    });
    $("#button-id").on('click',function(){
        disable_scroll = true;
        $('html,body').animate({
            scrollTop: $(this).offset().top + 1
        }, function(){
            disable_scroll = false;
        });
    });
});

Answer 2

最简单的解决方案是临时替换scroll事件订阅。

// initial subscribe to scroll event
this.$el.on("scroll", this.handleScroll);

// unsubscribe initial handler and subscribe fake handler before manual scroll
this.$el.off("scroll");
this.$el.on("scroll", () =>
{
    this.$el.off("scroll");
    this.$el.on("scroll", this.handleScroll);
});

// scroll manually
this.$el.scrollTop(0);

但是，如果在手动滚动期间（this.$el.scrollTop(0);期间）没有发生滚动事件，则不会在第一个滚动事件上调用处理程序。在这种情况下，在第一次事件中，假事件将被取消订阅，而原始事件将被重新订阅，但不会被调用。

Answer 3

您可以通过临时删除事件来执行此操作，然后在调用之后添加相同的功能。但我有另一种算法。我不能说这是一个更好或最好的算法，但如果你喜欢它，你可以使用它。：）

＆＃34;你叫做scrollTo＆＃34;如果您滚动到相同的位置/坐标，则不会打印文本并且不会触发事件。因此，交替单击下面示例中的按钮以保持打印文本。它是因为你试图滚动到相同的位置，在javascript中，它将被假定为＆＃34;根本不滚动＆＃34;，因此事件不会被触发。

＆＃13;

		window.dontTrigger=0;/*
		If more than 0, then the body->onscroll is allowed to be triggered, else, it won't be triggered
		*/
		window.scrollTo2=window.scrollTo;
		window.scrollTo=function(x,y){
		x=Math.ceil(x);
		y=Math.ceil(y);	
		var scrlX=Math.ceil(window.scrollX);
		var scrlY=Math.ceil(window.scrollY);
		if (!(x==(scrlX)) || !(y==(scrlY))) window.dontTrigger++;
		console.log(window.dontTrigger);
		window.scrollTo2(x,y);
		}
			function OnBodyScrollFunc(){
			//console.log(!window.dontTrigger);
				if (window.dontTrigger) {
				//If dontTrigger not 0, then skip
				window.dontTrigger--;
				console.log("you called scrollTo");
				return ;
				}else{
				console.log("You scrolled the page");
				}
		}

＆＃13;

<html>
	<body onscroll="OnBodyScrollFunc();">
<button type="button" onclick="window.scrollTo(0,50);" style="left:0px;position:fixed;">Scroll to (0,50)</button>
<button type="button" onclick="window.scrollTo(0,150);" style="right:0px;position:fixed;">Scroll to (0,150)</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
	</body>
</html>

＆＃13;

滚动到顶部而不触发滚动（）

3 个答案: