JSFiddle - React, Tailwind, and code Playground

HTML

<div data-role="page" id="index">

 <div data-role="panel" id="mypanel" data-display="overlay" data-theme="b" data-position-fixed="true" data-swipe-close="true" data-position="left" >
        <ul data-role="listview">
			<li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
            <li>Item4</li>
            <li>Item5</li>
             <li>Item5</li>
            <li>Item6</li>
            <li>Item7</li>
            <li>Item8</li>
            <li>Item9</li>
            <li>Item10</li>
            <li>Item11</li>
            <li>Item12</li>
            <li>Item13</li>
            <li>Item14</li>
            <li>Item15</li>
            <li>Item16</li>
            <li>Item17</li>
            <li>Item18</li>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
            <li>Item4</li>
            <li>Item5</li>
            <li>Item6</li>
            <li>Item7</li>
            <li>Item8</li>
            <li>Item9</li>
            <li>Item10</li>
            <li>Item11</li>
            <li>Item12</li>
            <li>Item13</li>
            <li>Item14</li>
            <li>Item15</li>
            <li>Item16</li>
            <li>Item17</li>
            <li>Item18</li>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
            <li>Item4</li>
            <li>Item5</li>
            <li>Item6</li>
            <li>Item7</li>
            <li>Item8</li>
            <li>Item9</li>
            <li>Item10</li>
            <li>Item11</li>
            <li>Item12</li>
            <li>Item13</li>
            <li>Item14</li>
            <li>Item15</li>
            <li>Item16</li>
            <li>Item17</li>
            <li>Item18</li>
        </ul>
			
		</div>
    
 <div data-role="header" data-position="fixed"  data-tap-toggle="false">
			<h1>Indi Scroll Panel</h1>
			<a href="#mypanel" data-icon="home" data-iconpos="notext">Home</a> 
   </div> 
     <div data-role="content">
        
        <ul...

CSS

::-webkit-scrollbar { width: 0px; }
.ui-panel.ui-panel-open {
    position:fixed;
}
.ui-panel-inner {
    position: absolute;
    width:100%;
    top: 0px;
    bottom: -17px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

JavaScript

var storePosition = {
    topCoordinate : null
}

$(document).ready(function(){  


$( "#mypanel" ).panel({
  beforeopen: function( event, ui ) {

  storePosition.topCoordinate =  $(this).offset().top;
    $( ".ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page" ).css("position","fixed");
  }
});


$( "#mypanel" ).panel({
  
  beforeclose: function( event, ui ) {

  	$( ".ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page" ).css("position","");

if($.mobile.activePage.attr("id") == "index" && storePosition.topCoordinate !== 0){
  	
    $('html, body').animate({
                        scrollTop: $("#mainlist").position().top += storePosition.topCoordinate - 60
                    }, 10);
  }
}
});
 });