JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<ul id="cont" class="cont">
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
</ul>

<ul id="cont2" class="cont">
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>

    <li>lorem ipsum</li>

    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
</ul>

CSS

.cont {
    height: 200px;
    overflow: auto;
    position: relative;
    margin: 20px;
    border: solid 1px #ccc;
}

div {
    width: 100%;
    height: 4px;
    display: none;
    position: absolute;
}

.top {
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0));
}

.bottom {
    top: 0;
    left: 0;
    background-image: linear-gradient(to top, rgba(0,0,0,0.1), rgba(0,0,0,0));
}

li {
    margin-bottom: 2px;
    padding: 5px;
}

CoffeeScript

class ShadowScroller
    
    constructor: (element) ->
    
        cont = document.getElementById element

        top = document.createElement 'div'
        top.className = 'top'
        cont.insertBefore top
        
        bottom = document.createElement 'div'
        bottom.className = 'bottom'
        cont.insertBefore bottom
        
        scroll = (event) ->
            fromTop = cont.scrollTop
            height = cont.clientHeight
            scrollHeight = cont.scrollHeight
            top.style.top = fromTop + 'px'
            bottom.style.top = (fromTop + height - 4) + 'px'
            
            top.style.display = if fromTop <= 0 then 'none' else 'block'
            bottom.style.display = if fromTop + height >= scrollHeight then 'none' else 'block'
                            
        cont.addEventListener 'scroll', scroll, false
        
        scroll()

    
new ShadowScroller 'cont'
new ShadowScroller 'cont2'