Прокрутить div

Question

У меня есть 2 блока: A и B. B прокручивается, но A находится абсолютно над B. Когда я прокручиваю курсор мыши в области B, он работает хорошо, но если он помещается в область из A, блок B не прокручивается (очевидно).

Я попытался применить pointer-events к none для A, он работает по мере необходимости, но содержит несколько кнопок, которые необходимо кликать.

Есть ли способ игнорировать событие прокрутки, но не игнорировать события click для блока A?

Answer 1

Что вы можете сделать вместо установки указателя-события: none в теге a, создать класс с именем. {Name} и использовать указатель-событие: none только в этом классе. Таким образом, ваши другие кнопки не будут затронуты.

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

<div class="block-a scroll"> 
 
    <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>

Он отлично работает, как его для меня. он скомпилирован здесь, потому что я не могу заставить его понять jade в этом предварительном просмотре

Answer 2

Я думаю, что для этого нет чистого CSS-метода. Вы можете попробовать некоторые вещи JS. Существует 2 очевидных способов:

1. Набор pointer-events: none для всего блока А и вызвать click событие в вручную, когда он нажал на Б. document.elementFromPoint(x,y) и отключение/включение pointer-events должны сделать трюк.
2. Set pointer-events: none для всех, кроме кнопок и поймать mousewheel события на кнопках. Событие Mousewheel довольно сложно, поэтому вы можете посмотреть библиотеку jquery.mousewheel.