在可滚动区域内但在内部div之上创建嵌入阴影

Question

我有一个paper-dialog-scrollable，当我向下滚动页面时，我希望在顶部显示一个阴影。

但是，如果我设置了inset框阴影，那么即使在使用div后，任何内部z-index只会覆盖它的顶部。

任何人都可以帮助我吗？请参阅此Fiddle进行播放/编辑。

目标是在内容没有滚动时没有阴影，然后在内容时淡入。

Answer 1

您需要再创建一个类boxShadow来定义滚动div上的box-shadow。

.container {
  width: 400px;
  height: 200px;
  background: #e5e5e5;
  overflow: auto;
}
.content {
  text-align: center;
  width: 200px;
  height: 300px;
  background: lightblue;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
  z-index:-1;
}
.boxShadow{box-shadow: inset 0 10px 10px -1px rgba(0,0,0,0.6); width:400px; height:20px; background:#e5e5e5;}

<div class="boxShadow"></div>
<div class="container">
    <div class="content">
        Some text
    </div>
</div>

Answer 2

在z-index上使用否定position: relative和.content将其移至.container下，然后添加.wrapper背景色{{1}在position: relative下提供背景的正z-index值。

＆＃13;

＆＃13;

.content

＆＃13;

var container = document.querySelector('.container');
var containerClasses = container.classList;
container.addEventListener('scroll', function(e) {
  if(e.target.scrollTop > 0) {
    containerClasses.contains('shadow') || containerClasses.add('shadow');
  } else {
    containerClasses.remove('shadow');
  }
});

＆＃13;

.wrapper {
  position: relative;
  z-index: 0;
  display: inline-block;
  background: #e5e5e5;
}

.container {
  position: relative;
  width: 400px;
  height: 200px;
  overflow: auto;
  box-shadow: inset 0 10px 10px -1px rgba(0, 0, 0, 0);
  transition: box-shadow 0.3s;
}

.shadow {
  box-shadow: inset 0 10px 10px -1px rgba(0, 0, 0, 0.6);
}

.content {
  position: relative;
  z-index: -1;
  text-align: center;
  width: 200px;
  height: 300px;
  background: lightblue;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
}

＆＃13;

＆＃13;

＆＃13;

如果您需要<div class="wrapper"> <div class="container"> <div class="content"> Some text </div> </div> </div>可点击，您可以添加带有伪元素叠加层的包装器。叠加层具有.content，这意味着可以单击其下的内容。唯一的问题是滚动条的宽度，这在浏览器中是不一致的：

＆＃13;

＆＃13;

pointer-events: none

＆＃13;

var wrapperClasses = document.querySelector('.wrapper').classList;
var container = document.querySelector('.container');
container.addEventListener('scroll', function(e) {
  if(e.target.scrollTop > 0) {
    wrapperClasses.contains('shadow') || wrapperClasses.add('shadow');
  } else {
    wrapperClasses.remove('shadow');
  }
});

＆＃13;

.wrapper {
  position: relative;
  display: inline-block;
  background: #e5e5e5;
}

.wrapper::before {
  position: absolute;
  z-index: 1;
  top: 0;
  width: calc(100% - 12px); /** the width minus the scrollbar width **/
  height: 100%;
  box-shadow: inset 0 10px 10px -1px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  content: "";
}

.shadow::before {
  opacity: 1;
}


.container {
  width: 400px;
  height: 200px;
  overflow: auto;
}

.content {
  text-align: center;
  width: 200px;
  height: 300px;
  background: lightblue;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要添加JQuery：

var header = $(".container");
 $(".container").scroll(function() {
        var scroll = $(this).scrollTop();
        if (scroll >= 2) {
            $(this).addClass("shadow");
        } else {
            $(this).removeClass("shadow");
        }
 });

.container {
  width: 400px;
  height: 200px;
  background: #e5e5e5;
  overflow: auto;
  -webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
.container.shadow {
  box-shadow: inset 0 10px 10px -1px rgba(0,0,0,0.6);
  -webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.content {
  text-align: center;
  width: 200px;
  height: 300px;
  background: lightblue;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
    <div class="content">
        Some text
    </div>
</div>