如何在可滚动div的顶部和底部获得褪色阴影，或者隐藏在它们各自的末端答案

【问题标题】：How to get fading shadows on top and bottom of a scrollable div, either being hidden at their respective end如何在可滚动div的顶部和底部获得褪色阴影，或者隐藏在它们各自的末端
【发布时间】：2019-01-14 05:34:37
【问题描述】：

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

目前的外观：

它应该是什么样子：

仅滚动条顶部 - 底部阴影

中间的滚动条 - 两个阴影

滚动条底部 - 仅顶部阴影

【问题讨论】：

标签： html css scroll shadow

【解决方案1】：

您可以使用 span 更改 after 和 before 以及 after 和 before 然后更改此 span 宽度的宽度：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>

【讨论】：

看起来不错，但唯一的问题是 bottom 属性。假设#content 下有页脚div，则底部阴影将关闭。我知道阴影需要向上移动一些像素以与边框对齐，但我不确定是否有 position: fixed 的属性允许相对定位...
你可以将 position: absolute 设置为底部阴影并将 #content position:relative 设置为底部阴影底部：0
我已经找到了另一种解决方案，方法是将#content 包装到另一个div 和position: relative，并在#content 旁边放置一个名为#shadows 的div 和position: absolute; width: 100%; height: 100%，基本上是定位#shadows 在上面。然后，您可以分别使用top: 0 和bottom: 0 将阴影放在#shadows 中。无论如何我都会标记你的答案，因为它基本上仍然是我需要的东西，谢谢:)