代码之家 › 专栏 › 技术社区 › StrikeAgainst

如何在可滚动分区的顶部和底部得到淡入淡出的阴影,或者隐藏在它们各自的末端

shadow scroll css html

StrikeAgainst · 技术社区 · 5 年前

我有一个可滚动的 div 在我的Web应用程序中,我希望在 div 的视区(固定在外部视图上,而不是实际的可滚动视图内)。最棘手的部分是,我想显示阴影,只要滚动条的两端还没有被击中;这意味着,只有当滚动条不在顶部时才显示顶部阴影,而底部的阴影也一样。

我希望这能直观地表明 div 仍然在两个方向上继续。我已经检查过不同的问题,这些问题试图获得相似的东西,但并不完全符合我的需要。我已经知道了如何通过css background属性放置阴影,但是在 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>

当前外观:

它的外观:

滚动条顶部-仅底部阴影

滚动条中间-两个阴影

滚动条底部-仅顶部阴影

1 回复 | 直到 5 年前

amira ahmed 5 年前

您可以使用“后”和“前”类更改“后”和“前”跨度,然后更改此跨度宽度的宽度: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>