Skip to content

Instantly share code, notes, and snippets.

@yangacer

yangacer/preview-event.html

Last active October 6, 2017 16:40
Show Gist options
  • Save yangacer/b3de2f2f044673719f66c0d98e1cdde4 to your computer and use it in GitHub Desktop.
Save yangacer/b3de2f2f044673719f66c0d98e1cdde4 to your computer and use it in GitHub Desktop.
Download ZIP
Preview event test sample
Raw
preview-event.html
<html>
<style>
body {
display: flex;
flex-flow: row wrap;
}
.container {
width: 30%;
height: 400px;
margin: auto;
padding-right: 22px;
overflow: auto;
border: 1px solid #333;
}
.container:before {
content: attr(data-title) ", wheel:" attr(data-wheel-cnt) ", scroll:" attr(data-scroll-cnt);
background-color: #bbb;
display: block;
position: fixed;
width: inherit;
}
.content {
height: 2048px;
width: 100%;
padding-right: 22px;
background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}
</style>
<script>
function counter_factory(cont, field) {
return (e) => {
let cnt = 1 + parseInt(cont.getAttribute(field));
cont.setAttribute(field, cnt);
}
}
function setup() {
document.querySelectorAll('.content').forEach((div) => {
var cont = div.parentNode;
let title = cont.getAttribute('data-title');
if (title == 'passive') {
div.addEventListener('wheel', counter_factory(cont, 'data-wheel-cnt'), { passive: true});
cont.addEventListener('scroll', counter_factory(cont, 'data-scroll-cnt'), { passive: true});
return;
}
if (title == 'wo-passive') {
div.addEventListener('wheel', counter_factory(cont, 'data-wheel-cnt'), { passive: false});
cont.addEventListener('scroll', counter_factory(cont, 'data-scroll-cnt'), { passive: false});
return;
}
});
}
</script>
<body onload="setup();">
<div class="container" data-title="no-listener" data-wheel-cnt="N/A" data-scroll-cnt="N/A">
<div class="content"></div>
</div>
<div class="container" data-title="passive" data-wheel-cnt="0" data-scroll-cnt="0">
<div class="content"></div>
</div>
<div class="container" data-title="wo-passive" data-wheel-cnt="0" data-scroll-cnt="0">
<div class="content"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment