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 - No 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 {
    /* Setting body margins to 0 to have proper positioning of #container div */
    margin: 0;
}
/* #container div with absolute position and 100% width and height so it takes up whole window */
 #container {
    position: absolute;
    width: 100%;
    height: 100%;
}

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);
});