Question

对于一个项目，我有一个绝对位于初始视口尺寸的容器。所有内容都将放入此容器中。我们不希望视口跳转到＃39;在移动设备上滚动时，这就是我们为此容器解决方案选择的原因。不幸的是，容器中也会有固定元素，当在顶部时 - 阻止滚轮滚动（触摸滚动似乎仍在工作）。

我理解这种情况正在发生，因为固定元素是附加的＆＃39;到视口，而不是容器元素，因此滚动事件传播到正文（不滚动）。我想知道是否有任何方法可以让滚动事件传播到容器而不使用javascript＆＃39; hacks＆＃39;。注意：我已查看pointer-events: none，但问题是固定元素中可能还有可点击的内容。

小更新：它似乎适用于iOS（Sarari）触控滚动，但不适用于Android（Chrome）

Fiddle

＆＃13;

* {
  box-sizing: border-box;
}

body {
  background-color: #93d1ca;
  font-family: monospace;
  font-size: 18px;
  line-height: 1.8;
}

.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
}

.wrapper--body {
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #DCF0EE;
}

.wrapper--content {
  height: 500vh;
  padding: 1em;
  background-image: linear-gradient(rgba(7, 48, 84, 0), rgba(7, 48, 84, 1));
}

.content {
  position: relative;
  width: 90%;
}

.content--fixed {
  position: fixed;
  padding: 1em;
  border: 1px dashed #073054;
}

＆＃13;

<div class="wrapper wrapper--body">
  <div class="wrapper wrapper--content">

    <div class="content">
      <h1>
        Scrumicorns
      </h1>
      <p>
        Synergistically coordinate bleeding-edge best practices via market-driven services. Synergistically whiteboard multimedia based models with maintainable ROI. Progressively mesh adaptive strategic theme areas for plug-and-play metrics. Dynamically extend
        granular e-commerce after empowered benefits. Credibly cultivate resource sucking channels for bricks-and-clicks sources.
      </p>
    </div>

    <div class="content content--fixed">
      <h1>
        Fixed Scrumicorns
      </h1>
      <p>
        Appropriately facilitate holistic vortals whereas cross functional infrastructures. Interactively restore prospective opportunities whereas end-to-end processes. Intrinsicly procrastinate functionalized testing procedures for robust catalysts for change.
        Dynamically innovate interactive ROI and fully tested e-services. Appropriately engage market positioning benefits with principle-centered materials.
      </p>
    </div>


  </div>
</div>

＆＃13;

滚动容器顶部有固定元素

0 个答案: