JSFiddle - React, Tailwind, and code Playground
HTML
<div data-role="page">
<div data-role="panel" id="panel">
<div class="inside">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
...
CSS
.ui-content {
position: absolute;
overflow: scroll;
}
.inside {
position: absolute;
top: 1px;
left: 0;
right: 0;
bottom: 0px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
JavaScript
$(document).on("pageshow", function () {
$('.inside').css({
'height': ($(document).height()) + 'px'
});
$(window).resize(function () {
$('.inside').css({
'height': ($(document).height()) + 'px'
});
});
});
$(document).on("panelbeforeopen", "#panel", function () {
$(".ui-panel").css({
"overflow": "hidden"
});
$(".ui-content").css({
"overflow": "hidden",
"position": "fixed"
});
}).on("panelbeforeclose", "#panel", function () {
$(".ui-panel").css({
"overflow": "hidden"
});
$(".ui-content").css({
"overflow": "scroll",
"position": "absolute"
});
});