JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<body>
<div>
don't scroll if you drag here
</div>
<div class='scrollable'>
should be scrollable if you drag here
<ul>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
<li>and here</li>
</ul>
</div>
don't scroll if you drag here
</body>

CSS

.scrollable {
 height: 5em;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
}

JavaScript

// doesn't seem to work
var handleMove = function (e) {
    var scrollable = false;
    var items = $(e.target).parents();
    $(items).each(function(i,o) {
        if($(o).hasClass("scrollable")) {
            scrollable = true;
        }
    });
    if(!scrollable)
        e.preventDefault();
};

document.addEventListener('touchmove', handleMove, true);