CODEWITHSUNDEEP
javascriptjqueryscrolldraggableviewport
webDevAndEverythingElse
webDevAndEverythingElse

Reputation: 517

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:

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);
      });

Upvotes: 14

Views: 11300

Answers (4)

webDevAndEverythingElse
webDevAndEverythingElse

Reputation: 517

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()

Upvotes: 3

icetbr
icetbr

Reputation: 369

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

Upvotes: 1

webDevAndEverythingElse
webDevAndEverythingElse

Reputation: 517

I get a weekly newsletter (email) from CodeProject, and it had some stuff that certainly looks like it will solve my problem... hopefully this can help others:

  1. http://johnpolacek.github.com/scrollorama/ -- JQuery based and animates the scroll

  2. https://github.com/IanLunn/jQuery-Parallax -- JQuery based, similar to above

  3. http:// remysharp. com/2009/01/26/element-in-view-event-plugin/ -- JQuery, detects whether an element is currently in view of the user (super helpful for this issue!)

  4. Also the site in #2 had some interesting code: 

    var windowHeight = $window.height();
var navHeight = $('#nav').height() / 2;
var windowCenter = (windowHeight / 2);
var newtop = windowCenter - navHeight;
//ToDo: Find a way to use these vars and my original ones to determine scroll regions

Upvotes: 0

Jon
Jon

Reputation: 3203

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
});

Upvotes: 1

Related Questions