在可滚动区域内但在内部div之上创建插入阴影 [英] Creating inset shadow within scrollable region but above internal divs

问题描述

我有一个纸质对话框可滚动，我希望在页面滚动时在顶部出现阴影。

然而，如果我设置了一个 inset box阴影，那么任何内部的 div 甚至在玩过 z-index 之后它的顶部。

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

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

解决方案

使用负数 z-index 和位置：relative 在 .content 将它移动到 .container 下，然后添加一个 .wrapper 和背景颜色位置：相对，以及一个正面 z-index 值，以在 .content 。

$ b

< .container'）; var containerClasses = container.classList; container.addEventListener（'scroll'，function（e）{if（e.target.scr ollTop> 0）{containerClasses.contains（'shadow'）|| containerClasses.add（阴影）; } else {containerClasses.remove（'shadow'）; }}）;

.wrapper {position：relative; z-index：0;显示：inline-block;背景：＃e5e5e5;}。container {position：relative;宽度：400px; height：200px;溢出：自动; 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;宽度：200px; height：300px;背景：浅蓝色;保证金：汽车; margin-top：20px; margin-bottom：20px; padding：10px;}

 < div class =wrapper > < div class =container> < div class =content>一些文字< / div> < / div>< / div>  

.content 是可点击的，你可以添加一个伪元素覆盖的包装。叠加层包含指针事件：无，这意味着它下面的内容可以被点击。唯一的问题是滚动条的宽度，这在浏览器中是不一致的：

  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'）;}}）;  .wrapper {position：relative;}   
显示：inline-block;背景：＃e5e5e5;}。wrapper :: before {position：absolute; z-index：1; top：0; width：calc（100％ -  12px）; / **宽度减去滚动条宽度** /高度：100％; box-shadow：inset 0 10px 10px -1px rgba（0，0，0，0.6）;不透明度：0;指针事件：无;过渡：不透明度0.3s;内容：;}。shadow :: before {opacity：1;}。container {width：400px; height：200px; overflow：auto;}。content {text-align：center;宽度：200px; height：300px;背景：浅蓝色;保证金：汽车; margin-top：20px; margin-bottom：20px; padding：10px;}  
 
 < div class =wrapper > < div class =container> < div class =content>一些文字< / div> < / div>< / div>  
 

I have a paper-dialog-scrollable of which I would like a shadow to appear at the top when scrolling down the page.

However, if I set an inset box shadow, any internal divs simply go over the top of it even after playing with z-index.

Can anybody help me? Please see this Fiddle to play/edit.

The aim is to have no shadow when content hasn't been scrolled, then fade in when it is.

解决方案

Use negative z-index and position: relative on the .content to move it under the .container, and add a .wrapper with the background color, position: relative, and a positive z-index value to provide background under the .content.

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

.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;
}

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

If you need the .content to be clickable you can add a wrapper with a pseudo element overlay. The overlay has pointer-events: none, which means that the content under it can be clicked. The only problem is the width of the scrollbar, which is not consistent across browsers:

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

.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;
}

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

这篇关于在可滚动区域内但在内部div之上创建插入阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！