css - 滚动 div

Question

我有 2 个 block :A 和 B。B 是可滚动的，但 A 绝对位于 B 之上。当我在 B 区域用鼠标光标滚动时效果很好，但如果它放在 A 区域，B block 就不会滚动(很明显)。

我尝试将 pointer-events 应用到 A 的 none，它按需要工作，但它包含一些按钮，这些按钮应该是可点击的。

有没有办法忽略滚动事件但不忽略 block A 的点击事件？

.block-a {
  width: 500px;
  height: 200px;
  position: absolute;
  background: rgba(0,0,0,0.3);
}
.block-a button {
  margin: 50px;
}
.block-b {
  width: 500px;
  height: 500px;
  background: #ffd700;
  overflow-y: scroll;
}

<div class="block-a">
  <button>Should be clickable</button>
</div>
<div class="block-b">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat sapiente, voluptatibus iure earum, rerum cupiditate quo architecto officia nulla dignissimos deleniti aspernatur. Voluptatem hic nulla iure aut asperiores corrupti quia placeat culpa facilis. Distinctio tempora soluta assumenda, eaque asperiores maiores iusto explicabo accusamus veniam aperiam temporibus repellendus sint, consectetur beatae sapiente, dolorum sunt reiciendis. Odit, ad, omnis. Nobis sit dolorum est quaerat vel labore adipisci ab, incidunt ex quidem sint illum at dicta aut dolorem ipsam pariatur facere blanditiis vitae cum quasi molestias placeat impedit. Voluptate veniam sapiente a praesentium, doloribus cumque voluptas tenetur. Aliquam, voluptatibus officia aut. Beatae amet ut ipsum, fugit facilis debitis nihil temporibus consequatur possimus et explicabo tempora natus enim odit consectetur nemo cupiditate odio, dolorum autem eveniet repellendus optio unde, sint qui. Debitis doloremque nemo natus totam officia eaque, sed dicta officiis modi ab tempore id eius sit repudiandae fugiat? Molestiae eos, vel, fugit veritatis iusto cum excepturi reprehenderit alias repellendus aperiam, corporis magni assumenda totam eligendi recusandae necessitatibus? Impedit doloribus veniam sed animi fugit fuga, dolore neque nesciunt optio assumenda minima saepe quibusdam commodi reprehenderit quidem ipsum quis dolores, ducimus eaque nostrum rerum et. Inventore repellat, beatae error delectus placeat ea officia, fuga harum odit ullam ad eveniet fugit? Facilis tempore ea adipisci ipsam excepturi obcaecati ratione, at voluptate, eos nulla non velit nostrum quasi placeat ex ipsum! Corporis totam sed quaerat sequi ratione consequatur debitis dolorum saepe. Amet officiis commodi est sunt! Minima molestias ab cupiditate fugiat pariatur quia voluptatibus, nemo, aperiam, assumenda voluptates labore eum harum molestiae, optio mollitia accusantium. Quidem magnam veritatis provident, eligendi ipsam sint ducimus sed, excepturi molestias nemo vitae a officiis magni aliquam est facilis autem voluptatem repudiandae et neque nihil ab. Laborum voluptas ea totam vel minima quasi soluta odit maxime dicta, numquam obcaecati, doloremque fugit sapiente. Odio, cumque illum quos ut atque. Incidunt, non, dolores. Illo vero eos, dignissimos delectus voluptas iusto libero, perspiciatis tempore sed aspernatur laudantium quisquam error reiciendis officiis consequatur perferendis veniam repellendus qui tenetur numquam deserunt odio debitis! Quae at recusandae placeat doloribus corporis iure iusto unde voluptate quis laboriosam! Odio quasi ipsam quisquam soluta iusto quis nisi illo, at sequi eaque provident consequuntur! Nam labore, molestiae aperiam quas repellendus consectetur, soluta id doloremque esse vero? Placeat optio qui at non iste dolore, temporibus iusto repudiandae nihil commodi velit explicabo minima, libero dolores exercitationem vero, neque? Accusamus nobis harum magnam ratione eveniet delectus nam ea numquam, iste. Ipsa velit dolorum ex rem ipsum culpa possimus cupiditate, mollitia iure, quo molestias laudantium quos, hic saepe tempora minus magni perferendis. Placeat quos eveniet sint ut, modi quae recusandae nostrum vitae soluta itaque architecto tenetur vel doloribus ullam a, adipisci quasi aperiam dignissimos distinctio? Eveniet recusandae minus, repellat explicabo, harum rerum ab obcaecati omnis adipisci accusantium nulla rem, quia veniam quaerat placeat non quibusdam est, tempora quos! Debitis exercitationem similique veritatis ratione sit nobis excepturi iusto aut, maxime, quam nemo doloribus quidem ipsa libero velit ducimus praesentium omnis aspernatur molestiae sint voluptates fugiat tempora ab sunt. Pariatur odio, quod doloribus quos similique iste recusandae optio modi architecto quo non sapiente autem tempore beatae nihil repudiandae numquam tempora quibusdam voluptates ea incidunt. Distinctio cupiditate quasi error, quae adipisci dolor ipsam itaque debitis saepe vel accusantium, beatae enim esse a mollitia, illum eos? Qui ipsa incidunt commodi dolorem, quibusdam magnam tempore iste obcaecati iure a modi perspiciatis blanditiis quam ex aut distinctio assumenda, officiis, voluptate, repellendus ad. Consequatur odio eveniet laudantium porro inventore odit, quam ut provident quos, atque reprehenderit rem officiis ipsa debitis doloribus laboriosam voluptas animi a. Iure, soluta omnis necessitatibus consequuntur. Recusandae accusantium porro, maiores voluptatum, voluptatibus minima fugit ad iure quod, facere vel vitae, ducimus sed aperiam ut? Quasi possimus amet obcaecati aperiam fugit necessitatibus eius fugiat rem ducimus aut, error, nesciunt labore optio harum repellendus placeat odio tempore veritatis velit debitis ipsa modi cupiditate. Provident sit nihil facilis consequuntur suscipit ipsum molestias tempora quo assumenda quibusdam, nostrum rerum dignissimos aliquam nobis, modi placeat? Harum sint commodi blanditiis nobis eaque pariatur doloribus laborum excepturi dicta temporibus praesentium asperiores voluptates, iusto deleniti, unde consequatur corporis officiis magnam natus labore veniam amet velit fugit. Quos quia facere hic in labore voluptatem consequatur adipisci, voluptate aspernatur doloremque iure inventore veritatis voluptatibus, quaerat recusandae nihil totam voluptates suscipit. Qui, consequuntur, pariatur. Molestias commodi voluptatibus necessitatibus, perspiciatis officia architecto consequatur nostrum maxime dolorum adipisci numquam eveniet incidunt tempore dolores provident nulla saepe temporibus tempora. Debitis necessitatibus aut, alias mollitia consequatur sapiente error quaerat quasi quia, voluptas minus eveniet at et corrupti asperiores unde ducimus dolorum, quas autem natus, dolorem totam esse libero! Ex fugit dignissimos reprehenderit ducimus, libero velit placeat dicta architecto veritatis adipisci enim, possimus magnam. Quam fugit aperiam sunt asperiores excepturi nesciunt minus, quidem aspernatur sequi temporibus beatae cum culpa placeat. Hic tempore, iure ad asperiores culpa possimus fugiat quasi consequuntur. Cumque vero autem quidem qui fuga optio ipsam repudiandae est, ex aperiam deleniti quaerat facilis praesentium, quo! Enim eveniet reiciendis dolor sunt, ullam perferendis. Consectetur asperiores inventore soluta in obcaecati, porro sint! Deleniti ea hic accusantium debitis similique veritatis ab blanditiis fugiat atque repudiandae quasi iusto facilis, dolor necessitatibus laborum, nisi eaque aliquam nihil cupiditate ullam, molestiae delectus ad, eligendi aperiam. Corrupti quis esse, deleniti necessitatibus eveniet illum, temporibus hic, harum debitis natus iusto consequuntur culpa repudiandae unde consequatur velit vero. Aspernatur odio rem tempore quasi assumenda doloremque nisi sunt deleniti saepe, numquam accusantium accusamus cupiditate consectetur fugit pariatur ipsam esse quo possimus impedit. Dolore animi harum rem aperiam porro voluptatibus, obcaecati, nesciunt, totam voluptate corrupti error facilis non laborum impedit sapiente fuga iure doloremque laboriosam asperiores tempora accusamus earum! Ad maiores natus iusto necessitatibus, quod alias quasi culpa. Labore quo, quae, molestiae laboriosam dolorem sunt! Dolore consequatur eligendi enim inventore ab cum quam impedit vitae beatae error ipsum iure optio quis voluptates, delectus nobis accusantium magni! Vero iste aliquid, repellat corporis cumque neque dignissimos maxime aut recusandae. Ex a harum, at temporibus! Adipisci suscipit quo quod, voluptatum consectetur quaerat nesciunt! Architecto, id nihil!</p>
</div>

Answer 1

我想没有纯 CSS 的方法可以实现这一点。你可以尝试一些 JS 的东西。有两种明显的方法:

1. 为整个 A block 设置 pointer-events: none 并在 B 上单击时手动触发 A 上的 click 事件。 document.elementFromPoint(x,y ) 并禁用/启用 pointer-events 应该可以解决问题。
2. 为除按钮之外的所有设置pointer-events: none 并在按钮上捕获mousewheel 事件。鼠标滚轮事件非常棘手，因此您可以查看 jquery.mousewheel 库。