JSFiddle - React, Tailwind, and code Playground

by markrummel

HTML

<!DOCTYPE html>
<html>
    
    <body>
        <div id="container">
            <div data-role="page">
                <div data-role="header" data-position="fixed">
                     <h1>Trans. Fix With Native Scrolling</h1>

                </div>
                <div data-role="content" class="scrollable">
                    <ul data-role="listview">
                        <li> <a id="scroll-down" href="#">Click to scroll down</a></li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li>Another Item</li>
                        <li id="bingo">Bingo!!!</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>

</html>

CSS

body {
    margin: 0;
}
div#container {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
}
div[data-role="header"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
div[data-role="content"] {
    position: absolute;
    top: 41px;
    bottom: 0;
    left: 0;
    right: 0;
}
.scrollable {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
/* iOS specific fix, don't use it on Android devices */
 .scrollable > * {
    -webkit-transform: translateZ(0px);
}

JavaScript

$(document).one('mobileinit', function () {  
    // Setting #container div as a jqm pageContainer
    $.mobile.pageContainer = $('#container');
    
    // Setting default page transition to slide
    $.mobile.defaultPageTransition = 'slide';
});

$('#scroll-down').click(function() {
   $('html, body').animate({scrollTop: $('#bingo').offset().top}, 2500); 
});