CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3824190
user3824190

Reputation: 31

scrollable div anchor in mobile not working

<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

Upvotes: 0

Views: 372

Answers (1)

zipzit
zipzit

Reputation: 3997

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.

Upvotes: 1

Related Questions