scrollable div anchor in mobile not working

Question

<div id="makeMeScrollable">
    <a data-toggle="pill" href="#prepaid-mobile">Prepaid mobile</a>
    <a data-toggle="pill" href="#postpaid-mobile">postpaid mobile</a>
    <a data-toggle="pill" href="#dth">dth</a>
    <a data-toggle="pill" href="http://rxx.pay1.in/#data">datacard</a>                              
</div>

This is working well on the desktop but not in mobile phones. I am using the Smooth div scrollable library

Answer 1

From the readme.md file:

In order for this to work you also need to include jquery.kinetic.js on your page. As you can see I have disabled hotSpotScrolling since it's not working very well on touch devices, but you don't need to do that.

Remember on mobile platforms, there is no scrolling, only touch events. You can use touch to drag the screen up, but you've got to control it carefully.

In the current library, line 77, is shut off by default.

        // Touch scrolling
        touchScrolling: false,

You have to override that in your JS function calls. Note: you don't want to touch the github library code, you want to supplement it with your own calls.

You will need to add:

<script src="js/jquery.kinetic.min.js" type="text/javascript"</script>

and

document).ready(function () {
$("div#makeMeScrollable").smoothDivScroll({
    touchScrolling: true,
    hotSpotScrolling: false
});

to your website / app.

Answer 2

Above logic is not working. can you please update the working code? @zipzit