滚动到顶部而不触发 scroll()
[英]Scrolling to the top without triggering scroll()
问题描述
I am binding scroll to an element with some logic
我将滚动绑定到具有某些逻辑的元素
$(".elem").scroll(function(){
some logic
});
and it other places of the code I need to scroll to the top of the element, but without triggering the scroll event以及代码的其他地方我需要滚动到元素的顶部，但不触发滚动事件
$(".elem").scrollTop(0)
Is this possible?这可能吗？
3 个解决方案
解决方案1
1 2014-07-30 04:19:24
You can use something like below:您可以使用以下内容：
$(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;
});
});
});
解决方案2
0 2018-05-12 15:39:14
The easiest solution is to temporary replace scroll event subscription.最简单的解决方案是临时替换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);
However, if scroll event doesn't happen during manual scroll (during this.$el.scrollTop(0); ), then handler will not be called on first scroll event.但是，如果在手动滚动期间（在this.$el.scrollTop(0);期间）没有发生滚动事件，则不会在第一个滚动事件上调用处理程序。 In this case, during first event, fake event will be unsubscribed, and original one re-subscribed, but will not called.在这种情况下，在第一个事件期间，假事件将被取消订阅，而原始事件将重新订阅，但不会被调用。
解决方案3
0 2018-06-10 10:29:39
You may do it by temporary remove the event, then add the same function after you called it.您可以通过临时删除事件来完成，然后在调用它后添加相同的函数。 But I have another algorithm.但我有另一种算法。 I can't say it is a better or the best algorithm, but you can use it if you like it.我不能说它是更好或最好的算法，但如果你喜欢它，你可以使用它。 :) :)
the "you called scrollTo" text will not printed and the event won't be triggered if you do scrollTo to the same position/coordinate.如果将 scrollTo 执行到相同的位置/坐标，则不会打印“您调用了 scrollTo”文本并且不会触发该事件。 So, click the buttons in example below alternately to keep print the text.因此，请交替单击下面示例中的按钮以保持打印文本。 It is occured because you tried to scroll to the same position, in javascript, it will be assumed as "not scrolling at all", so the event won't be triggered.发生这种情况是因为您试图滚动到同一位置，在 javascript 中，它将被假定为“根本不滚动”，因此不会触发该事件。
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"); } } <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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.