CODEWITHSUNDEEP
jquery
user888467
user888467

Reputation:

Making vertical list scroll on mouse over

I have a vertical list in my navigation which is longer than the screens height. I would like it so that when I start to hover over the list the list will start in move up but only when the mouse is around half way down the list.

Any advice on this would be much appreciated.

Thank you in advance.

Upvotes: 0

Views: 4614

Answers (2)

user669677
user669677

Reputation:

If you want it to be animated (and this case horizontal):

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        function(callback){window.setTimeout(callback, 1000 / 60);};
})();

var div = $('#menu3'),
    wrapScreenWidth = div.width(),
    wrapHeight = div.outerWidth(),
    listWidth = div.find('tr').outerWidth();
var go = 0;
function anim(){
    var act = Math.round(div.scrollLeft()),
        diff = Math.abs(act-go);
    if(diff)
        div.scrollLeft(div.scrollLeft()+ (act<go?1:-1)*diff*0.03);      
    window.requestAnimFrame(anim);                  
};

anim();

div.on('mousemove', function(e) {
    var cPointY = e.pageX,
        dP = ((cPointY / wrapHeight));
    go = Math.max(0,Math.round((listWidth * dP) - wrapScreenWidth));

});

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

One approach, is below:

var ul = $('ul:first'),
    ulHeight = ul.outerHeight();

ul.on('mousemove',
            function(e){
                var win = $(window),
                    cST = win.scrollTop();
                if (e.pageY>=(ulHeight/2)){
                    win.scrollTop(cST + 20);
                }
                else {
                    win.scrollTop(cST - 20);
                }
            });​

JS Fiddle demo.

This is based upon the halfway point of the list itself, and therefore relies on that halfway point being visible on the page itself.

To make it slightly more functional, the ul is within a containing element, and the scrolling is based upon the being past the halfway point of that containing element:

var div = $('#wrap'),
    wrapHeight = div.height(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove',
            function(e){
                var cPointY = e.pageY,
                    cST = div.scrollTop();
                if (cPointY >= (wrapHeight/2)) {
                    div.scrollTop(cST + 15);
                }
                else {
                    div.scrollTop(cST - 15);
                }
            });​

JS Fiddle demo.

Edited to add a further option that scrolls the list element up or down depending on the position of the cursor within the containing element:

var div = $('#wrap'),
    wrapScreenHeight = div.height(),
    wrapHeight = div.outerHeight(),
    listHeight = div.find('ul').outerHeight();

div.on('mousemove', function(e) {
    var cPointY = e.pageY,
        dP = ((cPointY / wrapHeight));
    div.scrollTop((listHeight * dP) - wrapScreenHeight);

});

JS Fiddle demo. ​ References:

Upvotes: 3

Related Questions