CODEWITHSUNDEEP
jqueryhtmlcssscroll
Newtt
Newtt

Reputation: 6190

Create scrollable div inside fixed div without scroll bar

I've created a scrolling div inside a fixed div, here:

http://jsfiddle.net/Newtt/9zRHx/

.scrollable {
    width: 200px;
    height: 200px;
    background: #333;
    overflow: scroll;
}
.fixed {
    position: absolute;
    top: 180px;
    width: 200px;
    height: 20px;
    background: #fa2;
}

However, I want to create a scrolling button. Now the JQuery works on the Fiddle as well as the site where I want it to work:

http://leonardorestaurant.in/testing/services.html

JQuery:

$(document).ready(function () {
    $("#down").click(function () {
        $('.scrollable').animate({
            scrollTop: 220
        }, "slow");
    });
    $("#up").click(function () {
       $('.scrollable').animate({
            scrollTop: -200
        }, "slow");
    });
});

However, it's not working in the exact manner I want it to. I need it to scroll down or up every time I click on the necessary arrow.

In the current method, it scrolls just once and doesn't continue after that. Is it possibly because I've kept the scroll amount too large? Also, is it possible to hide the scrollbar yet keep a scroll action?

Upvotes: 2

Views: 6511

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

use the +=/-= to instruct the animate method to add that amount instead of setting it as the final value..

$(document).ready(function () {
    $("#down").click(function () {
        $('.scrollable').animate({
            scrollTop: '+=220'
        }, "slow");
    });
    $("#up").click(function () {
       $('.scrollable').animate({
            scrollTop: '-=220'
        }, "slow");
    });
});

Demo at http://jsfiddle.net/9zRHx/1/

Read more at: http://api.jquery.com/animate/#animation-properties

.animate()

Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.

Upvotes: 4

Related Questions