如何在可滚动 div 的顶部和底部获得渐变阴影，或者隐藏在各自的末端

Question

我的 Web 应用程序中有一个可滚动的 div，我想在 div 视口的顶部和底部提供固定的渐变阴影（固定在外部视图上，不在实际的可滚动视图中）。棘手的部分是我想在滚动条各自的末端还没有被击中时显示阴影；也就是说，只有当滚动条不在顶部时才显示顶部阴影，底部也一样。

我希望这可以直观地表明，例如div 中的列表仍然在任一方向继续。我已经检查过不同的问题，这些问题试图实现类似但不完全是我需要的东西。我已经找到了如何通过 CSS 背景属性放置阴影，但很难在 div 上正确对齐它们，但仍然不知道是否有一种优雅的隐藏方式他们为了我的目的。如有必要，我可以使用 Javascript 来解决这个问题，尽管我想避免这种情况。由于我的实际代码太冗长，下面发布的代码已简化。

<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>

目前的情况：

外观应该如何：

滚动条顶部 - 仅底部阴影

中间的滚动条 - 两个阴影

滚动条底部 - 仅顶部阴影

Answer 1

你可以用class之后和之前改变跨度之后和之前然后改变这个跨度宽度的宽度：98.7%然后写javascript代码隐藏顶部阴影和底部阴影 js代码：

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');
            }
        });

代码应该是：

  <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>

如何在可滚动 div 的顶部和底部获得渐变阴影，或者隐藏在各自的末端

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

html

css

scroll

shadow