CODEWITHSUNDEEP
htmlcssscrollshadow
StrikeAgainst
StrikeAgainst

Reputation: 634

How to get fading shadows on top and bottom of a scrollable div, either being hidden at their respective end

I have a scrollable div in my web application which I want to give fixed fading shadows at both the top and the bottom of the div's viewport (fixed on the outer view, not inside the actual scrollable view). The tricky part is that I want to show the shadows just as long as their respective ends of the scrollable is not hit yet; that means, show the top shadow only when the scrollbar is not at the top, and the same for the bottom.

I want this to intuitively indicate that e.g. a list in that div is still continued in either direction. I've already checked through different questions which tried to achieve something similiar but not quite what I need. I already found out how to lay down the shadows via the CSS background property but struggle to align them properly over the div, and still don't know if there's an elegant way to hide them for my purpose. If necessary I can use Javascript to solve this, though I'd like to avoid that. The code posted below is simplified as my actual code is too verbose.

<html>
    <head>
        <style>
            #flex {
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                height: 100%;
            }
            #head {
                border: 1px solid red;
                height: 200px;
            }
            #content {
                overflow-y: scroll;
                flex: 1 1 auto;
                min-height: 0;
                border: 1px solid black;
                position: relative;
            }
            #content:before {
                content: '';
                position: fixed;
                min-height: 5px;
                width: 100%;
                margin: 0 auto;
                background: linear-gradient(to bottom, rgba(32,32,32,1), rgba(32,32,32,0)) no-repeat top;
                background-size: 100% 5px;
            }
            #content:after {
                content: '';
                position: fixed;
                min-height: 5px;
                width: 100%;
                margin: 0 auto;
                background: linear-gradient(to top, rgba(32,32,32,1), rgba(32,32,32,0)) no-repeat bottom;
                background-size: 100% 5px;
            }
        </style>
    </head>
    <body>
        <div id="flex">
            <div id="head"></div>
            <div id="content">
                <pre>
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
                    </pre>
            </div>
        </div>
    </body>
</html>

How it currently looks:

How it should look:

Scrollbar top - bottom shadow only

Scrollbar inbetween - both shadows

Scrollbar bottom - top shadow only

Upvotes: 1

Views: 511

Answers (1)

amira ahmed
amira ahmed

Reputation: 86

you can change after and before with span with class after and before then change width of this span width: 98.7% and then write javascript code to hidden top shadow and bottom shadow js code:

if ($('#content').scrollTop() == 0) {
            $('#content span.before').css('display', 'none');
        }
        $('#content').scroll(function () {

            var x = $('#content').scrollTop()
            if (x > 0) {
                $('#content span.before').css('display', 'block');
            } else {
                $('#content span.before').css('display', 'none');
            }

            if (x + $(this).height() >= $('pre').height()) {
                $('#content span.after').css('display', 'none');
            } else {
                $('#content span.after').css('display', 'block');
            }
        });

code should be:

  <html>

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <style>
        #flex {
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            height: 100%;
        }

        #head {
            border: 1px solid red;
            height: 200px;
        }

        #content {
            overflow-y: scroll;
            flex: 1 1 auto;
            min-height: 0;
            border: 1px solid black;
            position: relative;
        }

        #content span.before {
            content: '';
            position: fixed;
            min-height: 5px;
            /* width: 100%; */
            width: 98.7%;
            margin: 0 auto;
            background: linear-gradient(to bottom, rgba(32, 32, 32, 1), rgba(32, 32, 32, 0)) no-repeat top;
            background-size: 100% 5px;
        }

        #content span.after {
            content: '';
            position: fixed;
            min-height: 5px;
            /* width: 100%; */
            width: 98.7%;
            margin: 0 auto;
            background: linear-gradient(to top, rgba(32, 32, 32, 1), rgba(32, 32, 32, 0)) no-repeat bottom;
            background-size: 100% 5px;
            bottom: 9px;
        }
    </style>
</head>

<body>
    <div id="flex">
        <div id="head"></div>
        <div id="content">
            <span class="before"></span>
            <pre>
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Cras neque malesuada libero habitant, primis tortor platea.
                    </pre>

            <span class="after"></span>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        if ($('#content').scrollTop() == 0) {
            $('#content span.before').css('display', 'none');
        }

        //alert($('#content').height());
        $('#content').scroll(function () {

            var x = $('#content').scrollTop()
            if (x > 0) {
                $('#content span.before').css('display', 'block');
            } else {
                $('#content span.before').css('display', 'none');
            }

            if (x + $(this).height() >= $('pre').height()) {
                $('#content span.after').css('display', 'none');
            } else {
                $('#content span.after').css('display', 'block');
            }
        });
    </script>
</body>
</html>

Upvotes: 1

Related Questions