我的 Web 应用程序中有一个可滚动的 div，我想在 div 视口(viewport)的顶部和底部提供固定的渐变阴影(固定在外部 View ，而不是实际的可 ScrollView 内部)。棘手的部分是我想在滚动条各自的末端还没有被击中时显示阴影；也就是说，只有当滚动条不在顶部时才显示顶部阴影，底部也一样。
我希望它能直观地表明，例如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>
它目前的样子:
它应该是怎样的:
滚动条顶部 - 仅底部阴影
中间的滚动条 - 两个阴影
滚动条底部 - 仅顶部阴影
最佳答案
你可以改变之前和之后的跨度，之后和之前的类，然后改变这个跨度宽度的宽度: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>
关于html - 如何在可滚动 div 的顶部和底部隐藏阴影，或者隐藏在它们各自的末端，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54176207/