Is there any way to control scroll bar using JavaScript?

Question

In my below code a function to scroll DIV for every set of intervals where when I try to scroll up due to interval refresh scroll bar again coming down.

My code:

   var int = self.setInterval("f2()", 1000);
   function f2() {
   var objDiv = document.getElementById("messages2");
   objDiv.scrollTop = objDiv.scrollHeight;
   }

Now, by using onscroll property for DIV is there anyway to stop scrolling down when holding scroll bar with mouse?

Something like

       var int = self.setInterval("f2()", 1000);
       function f2() {
       var objDiv = document.getElementById("messages2");
       // if(objDiv.onscroll) i.e. when the particular DIV's scroll bar is on hold by cursor.
          {
          return false;
          }
       else
          {
            objDiv.scrollTop = objDiv.scrollHeight;
          }
      }

If the above kind of function can be implemented anybody please correct its syntax. I am a newbie to JavaScript.

Thanks in advance..!

David Hellsing · Answer 1 · 2011-12-27T19:15:59.807

6

I’m not sure what you are asking here, but window has a scroll event that you can listen to, and so does any other element that has overflow: auto|scroll set using CSS.

You can’t prevent the default scrolling behavior, but you can use the scrollTo() method or the scrollTop property if you want to do something annoying like:

window.onscroll = function() {
    window.scrollTo(0,0);
};

Here is a nice compat table of the scroll event: http://www.quirksmode.org/dom/events/scroll.html

scrollTo() docs: https://developer.mozilla.org/en/Window.scrollTo

edited Dec 27 '11 at 19:15

answered Dec 27 '11 at 18:22

David Hellsing

106,495
44
176
212

Is it not possible for DIV layer with `overflow:auto` ? – Mad coder. Dec 27 '11 at 18:24
Yes it is, any element that has ``overflow`` set to ``auto`` or ``scroll``. – David Hellsing Dec 27 '11 at 18:26
I am sorry it didn't work. I tried as `var objDiv = document.getElementById("messages2"); objDiv.onscroll = function () { objDiv.scrollTo(0, 0); };` If you don't mind can you please provide me the syntax for my div? – Mad coder. Dec 27 '11 at 18:37
The ``scrollTo()`` is only available on the window object, if you want to do the same for a HTML element, try ``scrollTop = 0;`` Demo: http://jsfiddle.net/an8Gd/ – David Hellsing Dec 27 '11 at 18:50

Is there any way to control scroll bar using JavaScript?

1 Answers1