我知道有关此主题的问题很多,但我似乎找不到确切的实例。
我只想捕获父级上的滚轮事件,但使它们在子元素上正常工作。但是,一旦我在父级上添加了一个侦听器,子级就会中断。
孩子们不应该在父母取消活动之前收到活动吗?事件冒泡似乎在这里倒退了。
document.getElementById('parent').addEventListener('wheel',function(e){
//some custom code here
e.preventDefault()
})
div{ border:solid 5px #999; height:300px; overflow-y:auto; }
#parent{ border-color:red; white-space:no-wrap;}
#parent div{ width:100px; display:inline-block}
<div id='parent'>
<p>TRY SCROLL WHEEL!</p>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque viverra justo nec ultrices. Neque gravida in fermentum et. Gravida quis blandit turpis cursus in hac habitasse. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu dictum varius duis at. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Urna nunc id cursus metus aliquam eleifend mi in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Etiam dignissim diam quis enim lobortis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Leo duis ut diam quam nulla porttitor. Ultrices in iaculis nunc sed augue lacus viverra. Dolor morbi non arcu risus quis varius. Sed pulvinar proin gravida hendrerit lectus a. Sit amet massa vitae tortor condimentum lacinia.
</div>
<div>Some more content2</div>
<div>Some more content3</div>
<div>Sit amet mattis vulputate enim nulla. Feugiat vivamus at augue eget arcu. Elementum eu facilisis sed odio. Eu sem integer vitae justo eget. Id nibh tortor id aliquet lectus. Id volutpat lacus laoreet non curabitur gravida arcu ac. Pellentesque dignissim enim sit amet. Enim blandit volutpat maecenas volutpat blandit aliquam. Blandit turpis cursus in hac habitasse platea. Facilisis leo vel fringilla est ullamcorper eget. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Nisi scelerisque eu ultrices vitae auctor eu augue ut.
Amet porttitor eget dolor morbi. Proin libero nunc consequat interdum varius sit. Laoreet sit amet cursus sit amet dictum sit amet. Integer quis auctor elit sed vulputate mi sit amet. Vulputate sapien nec sagittis aliquam. Vitae congue eu consequat ac felis. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Amet porttitor eget dolor morbi non arcu risus. Habitant morbi tristique senectus et netus et malesuada. Eu ultrices vitae auctor eu augue ut lectus. Adipiscing at in tellus integer feugiat scelerisque. Volutpat consequat mauris nunc congue nisi vitae. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Vitae aliquet nec ullamcorper sit amet risus. Nisl tincidunt eget nullam non nisi est sit. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Eget nunc scelerisque viverra mauris in aliquam sem. Amet consectetur adipiscing elit duis tristique sollicitudin. Proin gravida hendrerit lectus a.</div>
<p>Some more content down here</p>
</div>
找到了解决方法:
document.getElementById('parent').addEventListener('wheel',function(e){
e.preventDefault();
});
var elements = document.getElementById('parent').getElementsByTagName('div');
for(let i = 0; i<elements.length; i++){
elements[i].addEventListener('wheel',function(e){
this.scrollTop += -1*e.wheelDelta;
});
}
div{ border:solid 5px #999; height:300px; overflow-y:auto; }
#parent{ border-color:red; white-space:no-wrap;}
#parent div{ width:100px; display:inline-block}
<div id='parent'>
<p>TRY SCROLL WHEEL!</p>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque viverra justo nec ultrices. Neque gravida in fermentum et. Gravida quis blandit turpis cursus in hac habitasse. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Arcu dictum varius duis at. Pharetra convallis posuere morbi leo urna molestie at elementum eu. Urna nunc id cursus metus aliquam eleifend mi in. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Etiam dignissim diam quis enim lobortis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie at. Leo duis ut diam quam nulla porttitor. Ultrices in iaculis nunc sed augue lacus viverra. Dolor morbi non arcu risus quis varius. Sed pulvinar proin gravida hendrerit lectus a. Sit amet massa vitae tortor condimentum lacinia.
</div>
<div>Some more content2</div>
<div>Some more content3</div>
<div>Sit amet mattis vulputate enim nulla. Feugiat vivamus at augue eget arcu. Elementum eu facilisis sed odio. Eu sem integer vitae justo eget. Id nibh tortor id aliquet lectus. Id volutpat lacus laoreet non curabitur gravida arcu ac. Pellentesque dignissim enim sit amet. Enim blandit volutpat maecenas volutpat blandit aliquam. Blandit turpis cursus in hac habitasse platea. Facilisis leo vel fringilla est ullamcorper eget. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Nisi scelerisque eu ultrices vitae auctor eu augue ut.
Amet porttitor eget dolor morbi. Proin libero nunc consequat interdum varius sit. Laoreet sit amet cursus sit amet dictum sit amet. Integer quis auctor elit sed vulputate mi sit amet. Vulputate sapien nec sagittis aliquam. Vitae congue eu consequat ac felis. Eu feugiat pretium nibh ipsum consequat nisl vel pretium lectus. Ut diam quam nulla porttitor massa id neque aliquam vestibulum. Amet porttitor eget dolor morbi non arcu risus. Habitant morbi tristique senectus et netus et malesuada. Eu ultrices vitae auctor eu augue ut lectus. Adipiscing at in tellus integer feugiat scelerisque. Volutpat consequat mauris nunc congue nisi vitae. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Vitae aliquet nec ullamcorper sit amet risus. Nisl tincidunt eget nullam non nisi est sit. Amet consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Eget nunc scelerisque viverra mauris in aliquam sem. Amet consectetur adipiscing elit duis tristique sollicitudin. Proin gravida hendrerit lectus a.</div>
<p>Some more content down here</p>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句