带有框阴影的Safari溢出滚动-仍然能够获取溢出元素的句柄

Question

我有一个带有框阴影的可滚动ul，在Safari（11.1.2）中，当我将鼠标悬停在框阴影出现的区域上方时，onmouseover事件将触发{{1} }实际上不可见，即溢出

Link: Fiddle

li

#option-list {
  overflow: scroll;
  height: 50px;
  background-color: #eee;
  -webkit-box-shadow: 0px 6px 25px -5px rgba(61, 61, 61, 0.41);
  -moz-box-shadow: 0px 6px 25px -5px rgba(61, 61, 61, 0.41);
  box-shadow: 0px 6px 25px -5px rgba(61, 61, 61, 0.41);
}

关于如何解决此问题的任何想法？即，我不希望能够处理看不见的<ul id="option-list"> <li onmouseover="console.log(this)">1</li> <li onmouseover="console.log(this)">2</li> <li onmouseover="console.log(this)">3</li> <li onmouseover="console.log(this)">4</li> <li onmouseover="console.log(this)">5</li> <li onmouseover="console.log(this)">6</li> <li onmouseover="console.log(this)">7</li> <li onmouseover="console.log(this)">8</li> <li onmouseover="console.log(this)">9</li> <li onmouseover="console.log(this)">10</li> </ul>个项目。

请参阅屏幕截图-此时我还没有滚动，只是将鼠标悬停在投影上，我在控制台日志中显示了第4个选项的句柄。

Answer 1

就像@Huangism所建议的那样，您可以在div外部制作阴影，以防止事件触发。

ul {
  padding: 0px;
  margin: 0px;
}

#option-list {
  overflow-y: scroll;
  height: 50px;
  background-color: #eee;
  -webkit-box-shadow: 0px 6px 25px -5px rgba(61, 61, 61, 0.41);
  -moz-box-shadow: 0px 6px 25px -5px rgba(61, 61, 61, 0.41);
  box-shadow: 0px 6px 25px -5px rgba(61, 61, 61, 0.41);
  position: relative;
  width: 200px;
}

li {
  outline: 1px solid #ff0000;
}

.shadow {
  position: relative;
  width: 200px;
  height: 50px;
}

.shadow:before {
  content: "";
  height: 10px;
  background-color: rgba(238, 238, 238, 0.2);
  width: 100%;
  pointer-events: none;
  position: absolute;
  top: 0px;
  z-index: 2;
}

.shadow:after {
  content: "";
  height: 10px;
  background-color: rgba(238, 238, 238, 0.2);
  width: 100%;
  pointer-events: none;
  position: absolute;
  bottom: 0px;
  z-index: 2;
}

<div class="shadow">
  <ul id="option-list">
    <li onmouseover="console.log(this)">1</li>
    <li onmouseover="console.log(this)">2</li>
    <li onmouseover="console.log(this)">3</li>
    <li onmouseover="console.log(this)">4</li>
    <li onmouseover="console.log(this)">5</li>
    <li onmouseover="console.log(this)">6</li>
    <li onmouseover="console.log(this)">7</li>
    <li onmouseover="console.log(this)">8</li>
    <li onmouseover="console.log(this)">9</li>
    <li onmouseover="console.log(this)">10</li>
  </ul>
</div>