Bootstrap Snippet Scroll panel using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <div class="country">
                    <div class="country-active">
                        <p>lorem ipsum</p>
                    </div>
                    
                    <div class="list">
                        <div class="cities-list">
                        
                        <div class="list-group">
                            <div class="control-height list-group-item"></div>
                            <a class="list-group-item" href="#">lorem ipsum
                                <span class="badge">32</span>
                            </a>
                            
                            <a class="list-group-item" href="#">lorem ipsum
                                <span class="badge">32</span>
                            </a>
                            <a class="list-group-item" href="#">lorem ipsum
                                <span class="badge">32</span>
                            </a>
                            <a class="list-group-item" href="#">lorem ipsum
                                <span class="badge">32</span>
                            </a>
                            <a class="list-group-item" href="#">lorem ipsum
                                <span class="badge">32</span>
                            </a>
                            <a class="list-group-item" href="#">lorem ipsum
                                <span class="badge">32</span>
                            </a>
                            <a class="list-group-item" href="#">lorem ipsum
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        .list {
            height: 300px;
            position: relative;
            width: 100%;
        }
        
        .cities-list{
            height: inherit;
            width: 100%;
            overflow: hidden;
        }
        
        .cities-list a {
            width: 100%;
            text-decoration: none;
            display: block;
            color: #000;
        }
        
        .list-control {
            position: absolute;
            width: 100%;
            left: 0;
            font-size: 20px;
            color: #fff;
            text-align: center;
            text-shadow: 0 1px 2px rgba(0,0,0,.6);
            background-color: rgba(0,0,0,0);
            filter: alpha(opacity=50);
            opacity: .4;
        }
        .list .up{
            top: 0;
            background: -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var step = 100;
var scrolling = false;
// Wire up events for the 'scrollUp' link:
$(".up").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $(".cities-list").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    scrolling = false;
});
$(".down").bind("click", function(event) {
    event.preventDefault();
    $(".cities-list").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});
function scrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $(".cities-list").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Scroll panel"
Bootstrap 3.3.0 Snippet by le7o

Related: See More

Questions / Comments:

"Scroll panel" Bootstrap 3.3.0 Snippet by le7o

Related: See More

Questions / Comments:

"Scroll panel"
Bootstrap 3.3.0 Snippet by le7o