Question

I have a div with a css “overflow: scroll” property.
When inserting new content via the jQuery method html, a scroll event is fired.
Why is that and how can I prevent that? Because I am not actually scrolling, just inserting…

http://jsfiddle.net/qWckG/

Answer 1

You don’t need any workarounds like the above states. The reason this doesn’t work is beacuse of how you’ve created your layout. When you’re inserting “jau”, you’re removing the 800px div that it is wrapped in. The effect of this is that when you replace it with just text, the div is no longer there, and it resets the height of the container. This causes the scroll bar to disappear, which invokes the 'scroll' method.

You need to either:

Wrap jau in <div> jau </div>, OR:

$('#scrollWrapper').unbind('scroll');
$('#scrollWrapper').html('jau', function(){
  //rebind the scroll in the callback.
  $('#scrollWrapper').on('scroll', function(){
    alert("we have scrolled");
  });
});