Can We Scroll fixed 3 List item item on one time scroll using iscroller

Question

Please Help me to scroll fixed list item using iscroll. i am working on a project in which i want to scroll three LIST Item on one time scroll using iscroller. I allready tryed to scroll with scrollTo, ScrollToPage, ScrollToElement function of iscroller but it didn't work for me so please help me to scroll the fixed length item on one time user scroll.I am working on android project and i am using iscroll4 to scroll the element.

My Cade Is Like This...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>


<style>
.span8{
    position: absolute;
    width:630px;
    height:100px;
    overflow:auto;

}
.menu{
    float:left;
    width:200px;
    height:100px;
    background-color:red;
    margin-left:10px;
}
#scroller{
    width:3000px;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<script src="js/libs/iscroll.js" type="text/javascript"></script>
<script>
var isScrolling = false;
        myScroll = new iScroll('headerWrapper',{
            snap: 'li',ome Wor
            hScrollbar: false,
            vScrollbar: false ,
            momentum: true,
            vScroll: false,
            onScrollMove : function(e){
//               clearHeaderInterval();
//                myScroll.scrollTo(50, 0);
//                myScroll.refresh();

                console.log('onScrollMove===============>>>>>>>>>>>>>');
                isScrolling = true;

               // here get the device type and version
                if(deviceType() == 'android'){
                    var deviceVersion = device.version;

                    console.log(" deviceType is ===>>"+deviceVersion);
                    if(deviceVersion=='4.1' || deviceVersion=='4.1.1'|| deviceVersion=='4.1.2'){
                        console.log("android version is ===>>"+deviceVersion);
                     setTimeout(function(){
                        myScroll.refresh(); }, 1000);
                    }
                }
               // setTimeout(function(){myScroll.refresh();},0);
                },

        });
</script>
</head>
<body>

<div class="span8 marginleft mid-menu-panel" id="headerWrapper">
                <div id="scroller">
                    <ul id="tabitems">
                        <li class="dropdown-toggle menu click_h"  id="home">
                            Home
                        </li>

                        <li class="dropdown-toggle menu click_h"  id="word" >
                            Word

                        </li>

                        <li class="dropdown-toggle menu click_h"  id="sentences">
                            Sentence
                        </li>

                        <li class="dropdown-toggle menu click_h"  id="icon">
                            Icon
                        </li>

                        <li class="dropdown-toggle menu click_h"  id="question">
                            Question
                        </li>

                        <!--<li class="dropdown-toggle menu click_h" id="write_words">-->
                            <!--Write-->
                        <!--</li>-->
                        <li class="dropdown-toggle menu click_h" id="level" >
                            Level
                        </li>
                        <li class="dropdown-toggle menu click_h" id="config/" >
                           Configuration


                        <li class="dropdown-toggle menu click_h" id="info" >
                            Info
                        </li>

                        </li>
                        <li class="dropdown-toggle menu click_h"  id="website">
                            Web Services
                        </li>

                        <li class="dropdown-toggle menu click_h" id="help" >
                            Help
                        </li>

                        <!--td width="20">
                        <div class="buttons next">
                        <button class="btn btn-large right_arrow" type="button">
                        <i class="icon_right_arrow"></i>
                        </button>
                        </div></td-->

                    </ul>
                </div>
            </div>

</body>
</html>

it is not very clear what you want to accomplish with this so are you trying to get each box to scroll on its own or all together? — CMS_95, Dec 16 '13 at 17:05

Varinder · Accepted Answer · 2013-12-17T07:07:06.903

If im getting it correctly, you want to snap every 3rd item in the iscroll window.

I can't think of any elegant way to do this ( not sure if there is an option that allows to set number of elements to ignore before snapping )

But you could ( depending on how flexible you are with modifying the markup a bit ) move those three elements as child of every "li".

Heres the link to js fiddle ( http://jsfiddle.net/QFz3L/1/ )

HTML/CSS/JS below.

There isnt much difference in CSS and JS, Just some alterations to HTML

HTML:

<div class="span8 marginleft mid-menu-panel" id="headerWrapper">
<ul id="scroller">
    <li class="menu">
        <div>block 1</div>
        <div class="cf">
            <div class="span3">
                item 1
            </div>
            <div class="span3">
                item 2
            </div>
            <div class="span3">
                item 3
            </div>
        </div>
    </li>
    <li class="menu">
        <div>block 2</div>
        <div class="cf">
            <div class="span3">
                item 4
            </div>
            <div class="span3">
                item 5
            </div>
            <div class="span3">
                item 6
            </div>
        </div>
    </li>
    <li class="menu">
        <div>block 3</div>
        <div class="cf">
            <div class="span3">
                item 7
            </div>
            <div class="span3">
                item 8
            </div>
            <div class="span3">
                item 9
            </div>
        </div>
    </li>
</ul>
</div>

CSS:

.cf {
     overflow:hidden;
}
.span3 {
    float:left;
    height:100px;
    background:green;
    width:210px;
}
.span8{
    position: absolute;
    width:630px;
    height:100px;

}
.menu{
    float:left;
    width:630px; /* same as parent( .span8 ) to make sure only 1 .menu is visible ofc */
    height:100px;
    background-color:red;
}
#scroller{
    width:1890px; /* total width of children, 630 * 3 */
    overflow:hidden;
    list-style:none;
    padding:0;
    margin:0;
}

JS:

        myScroll = new iScroll('headerWrapper',{
            snap: 'li',
            hScrollbar: false,
            vScrollbar: false ,
            momentum: true,
            vScroll: false

        });

Hope that helps.

Cheers Varinder

thanks bro it's not working like which i want but it better solution to do this task. — user2075328, Dec 17 '13 at 05:16
Hey mate, Sorry maybe i failed to save the fiddle. updated again http://jsfiddle.net/QFz3L/1/ — Varinder, Dec 17 '13 at 07:03

Can We Scroll fixed 3 List item item on one time scroll using iscroller

1 Answers1