Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How use JQuery/Javascript to scroll down a page when the cursor at the top or bottom edge of the screen?

Simple, I just would like to have it so when a user is dragging an item and they reach the very bottom or top of the viewport (10px or so), the page (about 3000px long) gently scrolls down or up, until they move their cursor (and thus the item being dragged) out of the region.

An item is an li tag which uses jquery to make the list items draggable. To be specific:

  • ../jquery-ui-1.8.14.custom.min.js
  • http://code.jquery.com/jquery-1.6.2.min.js

I currently use window.scrollBy(x=0,y=3) to scroll the page and have the variables of:

  1. e.pageY ... provides absolute Y-coordinates of cursor on page (not relative to screen)
  2. $.scrollTop() ... provides offset from top of page (when scroll bar is all the way up, it is 0)
  3. $.height()... provides the height of viewable area in the user's browser/viewport
  4. body.offsetHeight ... height of the entire page

How can I achieve this and which event best accommodates this (currently its in mouseover)? My ideas:

  1. use a an if/else to check if it is in top region or bottom, scroll up if e.pageY is showing it is in the top, down if e.page& is in bottom, and then calling the $('li').mouseover() event to iterate through...
    1. Use a do while loop... this has worked moderately well actually, but is hard to stop from scrolling to far. But I am not sure how to control the iterations....

My latest attempt:

          ('li').mouseover(function(e) {

            totalHeight = document.body.offsetHeight;
            cursor.y = e.pageY;
            var papaWindow = window;
            var $pxFromTop = $(papaWindow).scrollTop();
            var $userScreenHeight = $(papaWindow).height();
            var iterate = 0;

            do {
                papaWindow.scrollBy(0, 2);
                iterate++;
                console.log(cursor.y, $pxFromTop, $userScreenHeight);
            }

            while (iterate < 20);
      });
like image 434
webDevAndEverythingElse Avatar asked Feb 02 '12 13:02

webDevAndEverythingElse


People also ask

How do I scroll to the top of the page using jQuery?

In jQuery, the scrollTo() method is used to set or return the vertical scrollbar position for a selected element. This behavior can be used to scroll to the top of the page by applying this method on the window property. Setting the position parameter to 0 scrolls the page to the top.

How do I scroll to the top of the page in HTML?

window. scrollTo(0, 0); …is a sure bet to scroll the window (or any other element) back to the top.

How do you scroll to top when a button is clicked?

window. scroll(0, 0) will work just fine in all browsers.


3 Answers

Works pretty well now, user just needs to "jiggle" the mouse when dragging items sometimes to keep scrolling, but for scrolling just with mouse position its pretty solid. Here is what I finally ended up using:

 $("li").mouseover(function(e) {

  e = e || window.event; var cursor = { y: 0 }; cursor.y = e.pageY; //Cursor YPos
  var papaWindow = parent.window;
  var $pxFromTop = $(papaWindow).scrollTop();
  var $userScreenHeight = $(papaWindow).height();

  if (cursor.y > (($userScreenHeight + $pxFromTop) / 1.25)) {

         if ($pxFromTop < ($userScreenHeight * 3.2)) {

                   papaWindow.scrollBy(0, ($userScreenHeight / 30));
             }
        }
  else if (cursor.y < (($userScreenHeight + $pxFromTop) * .75)) {

        papaWindow.scrollBy(0, -($userScreenHeight / 30));

        }

   }); //End mouseover()
like image 93
webDevAndEverythingElse Avatar answered Oct 05 '22 13:10

webDevAndEverythingElse


This won't work as the event only fires while you're mouse is over the li.

('li').mouseover(function(e) { });

You need to be able to tell the position of the mouse relative to the viewport when an item is being dragged. When the users starts to drag an item attach an 'mousemove' event to the body and then in that check the mouse position and scroll when necessary.

$("body").on("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});

Dont forget to remove your event when the user stops dragging.

$("body").off("mousemove", function(event) {
// Check mouse position - scroll if near bottom or top
});
like image 31
Jon Avatar answered Oct 05 '22 15:10

Jon


This may not be exactly what you want, but it might help. It will auto-scroll when the mouse is over the 'border of the screen' (a user defined region). Say you have a 40px wide bar on the right of the screen, if the mouse reaches the first 1px, it will start scrolling. Each px you move into it, the speed will increase. It even has a nice easing animation.

http://www.smoothdivscroll.com/v1-2.htm

like image 25
icetbr Avatar answered Oct 05 '22 15:10

icetbr