JavaScript-跟踪滚动事件

Question

I have a rogue scroll event that keeps automatically scrolling my page to the top each time I load a div element using Ajax. How do I track this down? I've tried setting breakpoint in scroll event handler and looking at callstack but that doesn't give me anything useful since it just shows it coming from jquery, but I am interested in knowing what event on what DOM element caused the scroll.

A little background, I am loading a div element using Ajax when a div element is clicked (onclick). NOTE this is not anchor!! But whenever I am close or at the bottom of the page, after the div element is loaded and added to the page, the page scrolls all the way to the top. Really annoying and trying to track down the element that initiated that rogue scroll...

Thank!

Answer 1

如果您不介意使用jQuery插件，请尝试查看Waypoint插件 ，此插件非常适合跟踪/处理滚动

Answer 2

If I've understood fine you need a code similar to this, in this code I show new data from ajax when the user is (through scroll) to a distance of 4000 pixels from the last element (in this case a div.newDeal:last) (was a very long web).

$(document).ready(function() {

//global variable in this script to test if I already made the request ajax ( I dont 
//want to make continious ajax request)
var loaded=false;


$(window).bind('scroll', handlerScroll); //attach event to the scroll


})//end document ready

//FIRE AUTOSCROLL (FIRE REQUEST AJAX)
//*************************************

var handlerScroll=function (){

    //get position of the scroll
    var space=$('#listdeals div.newDeal:last').offset().top - $(window).scrollTop();
    //if that distance is less than (or the middle, or the bottom). fire the request ajax
    if  (space<= 4000  &&     jQuery('div.previousDeal').size()==0){  

        //disable scroll event
        $(window).unbind();



        //
        //build data post
        //
        var  parameters="actionAutoscroll=true&"+.........;

        //MAKE REQUEST AJAX
        //********************

        $.ajax({  
            url: "/offers",  
            type:'POST',  
            data: parameters,   
            success: process_previousDeals       
        });  //end ajax


        return false;

    }
}//end if  load previous deals depending of scroll

}//end handler


function process_previousDeals(results){
 //inject new content in the page
}