CODEWITHSUNDEEP
jquerynicescroll
Nikki
Nikki

Reputation: 21

Linking nicescroll to arrow buttons

I'd love to be able to link custom arrow buttons to the Nicescroll script so that scrolling would occur when someone clicks on the up/down buttons (in addition to the existing keypress and mousewheel scrolling features that already exist).

Any ideas on how I can do this? (sorry I'm not so great with jquery)

Thanks

Upvotes: 2

Views: 2584

Answers (3)

giorgos
giorgos

Reputation: 398

I know it's a little late, but I was searching for a solution to the same problem and I eventually ended up with this, which in my case worked perfectly:

    var scrolled=0;

jQuery("#scroll-down").on("click" , function(){
    scrolled=scrolled+100;
    jQuery("#main").animate({
        scrollTop:  scrolled
    });
}); 
jQuery("#scroll-up").on("click" , function(){
    scrolled=scrolled-100;
    jQuery("#main").animate({
        scrollTop: scrolled
    });
});

Replace #scroll-down, #scroll-up and #main with your own ids. By changing 100 you can adjust the distance it scrolls with each click

Upvotes: 1

Paul
Paul

Reputation: 11

Find in niceScroll object this line:

rail.append(cursor);

and replace it on:

var cursor_wrapper = $(document.createElement('div'));
cursor_wrapper.css({width: '100%', height: '100%'});
cursor_wrapper.addClass('cursor-wrapper');
rail.append(cursor_wrapper);
cursor_wrapper.append(cursor);

Then add css:

.nicescroll-rails{
    background: url('../img/scroll-top-arrow.png') no-repeat center top;
}
.cursor-wrapper{
    background: url('../img/scroll-bottom-arrow.png') no-repeat center bottom;
    cursor: pointer;
}

This is not the best solution, but it works in vertical scroll...

Upvotes: 1

Arno
Arno

Reputation: 161

I'm answering this question a bit late but this could be useful for someone else.

You can achieve this by changing the scrolltop of the container where nicescroll is used. Nicescroll automatically changes the scrollbar so you don't really have to worry about that.

For example:

$(ARROW).click(function () { $(SCROLLCONTAINER).scrollTop($(SCROLLCONTAINER).scrollTop() + 50); });

If you want to continue scrolling when the user keeps pressing down you could use keydown and change the value of scrolltop with an interval and clear that interval when keyup.

Hope this helps.

Upvotes: 3

Related Questions