"Scroll panel"
Bootstrap 3.3.0 Snippet by kiibriia

<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 <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 <span class="badge">32</span> </a> <div class="control-height list-group-item"></div> </div> </div> <a class="list-control control-height up" href="#"> <span class="block-center glyphicon glyphicon-chevron-up arrow" aria-hidden="true"></span> </a> <a class="list-control control-height down" href="#"> <span class="glyphicon glyphicon-chevron-down arrow" aria-hidden="true"></span> </a> </div> </div> </div> </div>
.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 */ } .list .up:hover{ top: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0.65) 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 */ } .list .down{ bottom: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .list .down:hover{ bottom: 0; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */ } .control-height{ height: 45px; } .list .list-group{ margin-bottom: 0; } .arrow{ top: 13px; }
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) { scrollContent(direction); } }); }

Related: See More


Questions / Comments: