Create scrollable div inside fixed div without scroll bar

Question

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

.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?

Siddharth, for this solely purpose why you are not using anchor tags with styling, also use overflow:hidden (inside .scrollable) to hide the scrollbar yet keep a scroll action. — Shivanshu
– Shivanshu, Commented Nov 27, 2013 at 17:28

Community · Accepted Answer · 2020-06-20 09:12:55Z

4

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 27, 2013 at 17:24

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create scrollable div inside fixed div without scroll bar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related