Implementing vertical scroll with css and javascript? (with fiddle)

Question

Here's my fiddle:

I have an unordered list of items that can be scrolled through.

I'm trying to work out which approach is best:

Use CSS / jquery to set overflow to hidden and move the position of the <ul>

What's the best way to do this?

Code:

<div class="span4 side-study-box">
            <div class="side-box-menu">
                <a class ="side-box-menu-nav"><i class="icon-chevron-up icon-white"></i></a>
                <ul>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-facetime-video "></i></a>
                    </li>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-picture"></i></a>
                    </li>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-headphones "></i></a>
                    </li>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-pencil "></i></a>
                    </li>
                    <li>
                        <a class="side-box-menu-control"><i class="icon-hdd"></i></a>
                        <!-- Need code, math, sound, url, text -->
                    </li>
                </ul>
                <a class ="side-box-menu-nav"><i class="icon-chevron-down icon-white"></i></a>
            </div>

        </div>

Kieran · Accepted Answer · 2013-06-05 05:47:02Z

1

what about this: http://jsfiddle.net/PTSkR/94/

you need to add some type of click binding to move the menu up or down and a view port to limit the size

There are so many options when animating this is a really simple example that works only once. click binding would be like

$('.down').click(function () {
    var $move = $('.side-study-box ul');
    $move.css({
        top: '-20px'
    })
})

To get the elements posistion using jquery try

var position = $move.position();

edited Jun 5, 2013 at 5:47

answered May 31, 2013 at 4:51

Kieran

18.1k8 gold badges48 silver badges54 bronze badges

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

2 Comments

RobVious Over a year ago

Thanks Kieran. What if there are multiple elements to scroll through? I tried doing something like top: top + 20 but obviously this wouldn't work.

Kieran Over a year ago

you would want to get its current position and adjust it by 20px -20 to move up and +20 to move down.

Collectives™ on Stack Overflow

Implementing vertical scroll with css and javascript? (with fiddle)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related