user1903909
user1903909

Reputation: 33

iscroll / iscrollview custom scrollbar

i read the documentation, tried to comprehend the demo but still no custom scrollbar.

Basically i copied the demo-code from iScroll-Custom-Scrollbar:

HTML

<div class="demo-page" data-role="page" id="test-page">

  <div data-role="header">
<h1>Header</h1>
  </div><!-- /header -->

  <div data-iscroll="" data-role="content" id="wrapper">

    <div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->

    <ul data-role="listview" id="thelist">
        <li>Item 1 culpa aut nam qui</li>
        <li>Item 2 minima quam temporibus quidem</li>
        <li>Item 3 commodi sint facilis numquam</li>
    </ul>
 </div><!--wrapper-->
 </div><!--page-->

Script

<script type="text/javascript">
var myScroll;
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
</script>

Actually a class-attribute should be added to the scrollbar's div but it doesnt.

After trying to squeeze the bar to the death ;) i found out that the class is added as soon as the screen's height is very small and disappears when it gets bigger again. Pretty funny to watch...drives me crazy :D

Upvotes: 1

Views: 1470

Answers (1)

njtman
njtman

Reputation: 2170

It looks like you are initializing the iscrollview improperly.

Try this instead

<div class="demo-page" data-role="page" id="test-page">

  <div data-role="header">
<h1>Header</h1>
  </div><!-- /header -->

  <div data-role="content" data-iscroll='{"scrollbarClass": "myScrollbar"}'>

    <div class="iscroll-pulldown"></div><!--iScroll-Pulldown-->

    <ul data-role="listview" id="thelist">
        <li>Item 1 culpa aut nam qui</li>
        <li>Item 2 minima quam temporibus quidem</li>
        <li>Item 3 commodi sint facilis numquam</li>
    </ul>
 </div><!--wrapper-->
 </div><!--page-->

Now ditch the code in the script tags, it is unneeded.

The whole point of using the iscrollview is so you don't need to do anything in javascript. You can setup a simple iscroller by just including the data-iscroll attribute to a div. If you want to add more customized iscroll features, include it in quotes after data-iscroll=

You also don't need to specify a wrapper element because the iscrollview plugin will automatically create one for you.

Upvotes: 1

Related Questions