Using a hover event to scroll a page in any direction?

How can JavaScript be used to navigate a page’s overflowed:hidden content when hovering over an anchor element?

I plan on having content overflow in both X and Y directions inside my wrapper markup div. I’m going to hide the scroll-bar and try to leverage a more modern type of “hover-scroll method” of moving between locations using anchors and JavaScript (think of it as a tabletop perspective where the top, bottom, left and right margins would act as “hot spots” whereby when hovered upon, the scrolling effect would occur). The idea is pretty simple, but the implementation of it so far has been somewhat difficult…

I’d feel safe in assuming that this can be done but would any of you know what the best route would be? Part of my problems in this is finding the right sources to springboard off of. I’ve seen a bunch of web pages out there with tutorials and so forth, but many have been spotty when trying to hit topics that pertain to this idea.

I found a jQuery plugin called “Smooth Div Scroll” that has a perfect example of the type of scroll functionality I desire, but I’m a bit overwhelmed at all the black-box code being used for it (black-box for me, at least) . Besides that, it introduces reasons to be concerned about unnecessary amounts of code. Surely a vertical and horizontal “hover-scroll” system can be implemented without all that jQuery throughput… Right?

Any suggestions to shine some light on this would be really appreciated.

I think [B]this[/B] fits the bill and it’s jQuery-free.

Always provide a way of restoring the scrollbars.

Earlier this year I built something not dissimilar to what you’re describing I think. I quickly ripped out the guts of it and placed it online so you can take a look at it:

It uses the jQuery MapBox plugin to achieve the “overflow panning” effect. Take a peak through the main JS file and you should be able to glean what’s happening. In this example, I have 4 buttons that you can press (and hold down) to scroll the area (or you can use the arrow keys), it would of course be trivial to turn the mousedown in to a mouseover to achieve what you’re after.

You can most certainly do it without jQuery, it would just be slightly more work. And as it often is, it’s a question of how much time/effort/money is there available to build a bespoke solution vs. using jQuery + plugins and massaging them to do what you want.

Let me know if there is anything really unclear about it, or if you want some more info :slight_smile:

Calvert, that is EXACTLY what I was hoping for. You sir, are a gentleman and a scholar. :.)

John, I appreciate your link there because that will help me with another project I have coming up soon pertaining to some RPG stuff I do. I went ahead and downloaded that page you provided to take a look at it later. Is there any way to make the idle activity’s cursor (not sure how to describe it) capable of highlighting text?

You should be able to do that without too much hassle. I’ve disabled the selecting because the app I built it for used a drag interface and no text on the front page. The MapBox plugin actually takes care of the panning, which can be disabled quite easily by setting the “pan” option to “false”.

    zoom: false, // does map zoom? 
    [COLOR=#b22222][B]pan: false,[/B][/COLOR] // does map move side to side and up to down? 

Calvert, is there a way to make the second parameter leverage percentages?

I.e. -


The layout of the page I’m using is elastic and I would like to continue using this kind of layout if possible. The problem is that the “activeDepth” parm seems to require pixels. What level of difficulty would it be to make it use percentages if one were to manually modify that code to support it?