Question

我有一个带水平滚动的div，里面有很多图像。 div有一个 1-内阴影，它应该出现在它的孩子上，但 2- 孩子们应该能够接收指针事件。然而 3- div也应该能够接收一些指针事件以启用滚动。我一直在寻找和思考几个小时。而且我找不到任何解决方案来同时实现所有这三个任务。有没有人知道如何完成这项工作？

这是我的代码：

div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 150px;
  width: 100px;
  white-space: nowrap;
  box-shadow: inset 0 0 10px #000000;
  pointer-events:none;
}

div > img{
  z-index:-1;
  position:relative;
}

<div>
  <img onclick="alert()" src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
</div>

Answer 1

我可能无法理解所有约束，但也许您可以将内部图像包装到另一个html元素中？例如：

  <div>
    <figure onclick="alert('hello')">
      <img src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
    </figure>
    <figure onclick="alert('goodbye')">
      <img src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
    </figure>
  </div>

并使用以下css：

div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 150px;
  width: 100px;
  white-space: nowrap;
  box-shadow: inset 0 0 10px #000000;
  position: relative;
}

figure {
  /* just for this example: */
  height: 50%; 
  width: 150%;
  margin: 0;
}

div img{
  z-index:-1;
  position:relative;
}

您可以在此处播放：https://jsbin.com/kuzawemame/edit?html,css,output

Answer 2

这几乎可以满足您的需求。如果你想让div不移动，你必须将它的位置设置为固定并将其放在你希望它在窗口上的位置。我认为最好使用第三个div进行阴影，而不是推动你关注的元素。

＆＃13;

div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 150px;
  width: 100px;
  white-space: nowrap;
  position:relative;
}

div::before {
  content: '';
  position: absolute;
  width:100%;
  height:100%;
  box-shadow: inset 0 0 10px #000000;
  pointer-events:none;
}

＆＃13;

<div>
  <img onclick="alert()" src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
  <img onclick="alert()" src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
</div>

＆＃13;

如何使用z-index = -1创建元素接收单击事件？

2 个答案: