背景图像滚动与手机上的元素（android，ios）

Question

我做了一个响应式视图，现在我在手机上滚动内容时出现问题。更确切地说，问题是我的绝对定位元素与内容一起滚动。例如：

.days {
  display: -webkit-flex;
  display: flex;
  overflow-x: auto;
  padding: 15px 0;
  position: relative;
}

.fade-left {
  padding: 0 !important;
  position: absolute;
  left: 10px;
  top: 15px;
  width: 25px;
  height: 37px;
  background: url('../Images/left-opacity.png');
}
.days div {
  font-size: 15px;
  text-transform: uppercase;
  padding: 10px 40px;
  color: #a4b5bf;
  white-space: nowrap;
}

<div class="days">
   <div class="fade-left"></div>
   <div class="fade-right"></div>
   <div>Attendance to date</div>
   <div>Attendance this Year</div>
   <div>Absence Pattern</div>
</div>

每当我开始滚动时，淡入淡出 - 左/右开始使用我的元素在天div内滚动。它们没有固定在侧面，这就是我需要的。在滚动内容时，这些元素应该保持在一边。

请注意，此行为仅适用于手机，不适用于Chrome控制台或其他浏览器。

提前致谢。

编辑：https://jsfiddle.net/k2qzfz3m/这里有一个问题的jsfiddle，我希望我的白盒子留在父div的边缘，不要滚动其他内容。固定位置不是一个选项，因为我有更多内容并在页面上。