A Pen by Captain Anonymous.

index.haml

.table
  .center
    %h1 Android's Content-scroll-shadow
    .container
      .scroll-content

script.js

var maxScrollHeight = 15; // in pixel
var scrollSlowness  = 5; // divite scroll by x (set to 50 to see what I mean ^w^)

// add stupid stuff to have at least some content~
for (var i = 0; i < 2006; i++) {
  // random color
  var color = Math.floor(Math.random() * 4);
  
  var width = 16;
  $('.scroll-content').append('<div class="c-'+color+'" style="float: left; background: #'+color+'; width: '+width+'px; height: '+width+'px"></div>');
}






$('.scroll-content').parent('.container').prepend('<div class="div-before-elem"></div>');
$('.scroll-content').parent('.container').append('<div class="div-after-elem"></div>');

$('.div-before-elem').each(function() {
  var backgroundColor = $(this).parent('.container').children('.scroll-content').css('background-color');
  $(this).css({
    // comment this out, to have it red
    background: "linear-gradient(to bottom, "+backgroundColor+" 5%,transparent 100%)"
  })
});

$('.div-after-elem').each(function() {
  var backgroundColor = $(this).parent('.container').children('.scroll-content').css('background-color');
  $(this).css({
    // comment this out, to have it red
    background: "linear-gradient(to top, "+backgroundColor+" 5%,transparent 100%)"
  })
});

// update shadow each time it scrolls
$('.scroll-content').scroll(function() {
  updateShadows($(this));
});
// startup scroll fix
$('.scroll-content').each(function() {
  updateShadows($(this));
});

// main magic :)
function updateShadows(elem) {
  var scrollPosTop    = elem.scrollTop() / scrollSlowness > maxScrollHeight ? maxScrollHeight : elem.scrollTop() / scrollSlowness;
  
  // bottom is a bit tricky :(

  
  var scrollPosBottom = (elem[0].scrollHeight - elem[0].scrollTop - elem.height()) / scrollSlowness;
  var scrollPosBottom = scrollPosBottom >kjkjkj maxScrollHeight ? maxScrollHeight : scrollPosBott
  
  elem.parent('.container').children('.div-before-elem').css({
    height: scrollPosTop
  }).parent('.container').children('.div-after-elem').css({
    height: scrollPosBottom
  });}

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

html, body {
  margin: 0;
  background-color: #c0392b;
  height: 100%;
  
  font-family: 'Droid Sans', sans-serif;
} .table {
  display: table;
  height: 100%;
  margin: 0 auto;
} .center {
  display: table-cell;
  vertical-align: middle;
} h1 {
  text-align: center;
  font-weight: 400;
  color: #f6f6f6;
  font-size: 2.5em;
  text-shadow: 0 2px 5px darken(red, 30);
}



::-webkit-scrollbar {
  width: 16px;
} ::-webkit-scrollbar-track {
  background-color: #999;
  border-radius: 30px;
  border: 5px solid #CCC;
} ::-webkit-scrollbar-thumb {
  border-radius: 30px;
  background-color: #999;
  border: 3px solid #CCC;
  
  &:hover {
    background-color: lighten(#999, 7);
  } &:active {
    border-right-width: 4px;
    border-left-width: 4px;
    background-color: darken(#999, 14);
  }
}

.container {
  max-width: 300px;
  margin: 10px auto;
  border-radius: 3px;
  overflow: hidden;
  position: relative; // IMPORTANT!!
  
  box-shadow: 0 2px 5px darken(red, 30);
  
  border: 5px solid #DDD;
  
  & img {
    max-width: 100%;
  } & .div-before-elem {
    content: '';
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    width: calc(100% - 16px); // scrollbar width
    
    transition: height linear .2s;

    background: linear-gradient(to bottom, red 5%,transparent 100%);
  } & .div-after-elem {
    content: '';
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    width: calc(100% - 16px); // scrollbar width

    transition: height linear .2s;
    
    background: linear-gradient(to top, red 5%,transparent 100%);
  }
  
  & .scroll-content {
    max-height: 400px;
    padding-right: 5px;
    overflow: auto;
    background-color: #DDD;
    color: #999;
  }
}

// flatuicolors.com
.c-1 {background-color: #c0392b;}
.c-2 {background-color: #f39c12;}
.c-3 {background-color: #d35400;}
.c-0 {background-color: #f1c40f;}

vHKyJ.markdown

vHKyJ

Forked from Max Scopp's Pen tbfvJ.

A Pen by A Non Ymous on CodePen.

License.