Cool Scroller

This is a cool looking scrolling layout. Needs webkit.

by adamk33n3r

HTML

<ul>
    <div id="more-up">&nbsp;</div>
    <div id="more-down">&nbsp;</div>
    <div id="overlay">&nbsp;</div>
</ul>

CSS

body {
    background: #444;
    color: #aaa;
}

ul {
    border-radius:3px;
    padding-top: -20px;
    background:#333;
    list-style-type: none;
    padding-left: 10px;
    height: 80px;
    overflow-y: auto;
}

#more-up {
    position: fixed;
    pointer-events: none;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    margin-left:-10px;
    width: 590px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
}

#more-down {
    position: fixed;
    pointer-events: none;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    width: 590px;
    margin-top: 60px;
    margin-left:-10px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

ul::-webkit-scrollbar {
    display: block;
}

#overlay {
    position: fixed;
    pointer-events: none;
    margin-left: -10px;
    width: 590px;
    height: 80px;
    box-shadow: 0px 0px 15px 0px black inset;
    border-radius:3px;
}

JavaScript

ul=$("ul");
for (var i=1;i<101;i++){
    li=$("<li>");
    li.text(i);
    ul.append(li);
}
$("body").append(ul);

function scrolled(e) {
  if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
    scrolledToBottom(e);
  }
}
$("#more-up").hide();
//$("#more-down").hide();
$("ul").scroll(function() {
    myDiv=$("ul").get(0);
    overlay=$("#overlay");
    b="0 -10px 10px 0px black inset"
    t="0 10px 10px 0px black inset"
    if (myDiv.offsetHeight + myDiv.scrollTop >= myDiv.scrollHeight) {
        $("#more-down").fadeOut(200);
        //overlay.css("box-shadow", t);
    } else if (myDiv.scrollTop === 0) {
        $("#more-up").fadeOut(200);
        //overlay.css("box-shadow", b);
    } else {
        $("#more-down").fadeIn(200);
        $("#more-up").fadeIn(200);
        //overlay.css("box-shadow", t+","+b);
    }
});