I am having some problem with Iscroll5, it is not scrolling horizontally. What i am trying to do.
1.) Assign to class, so i can use it multiple times( I can already do this part, by pushing array)
2.) Setting each slide as 100% width(i can already do this part, with the iscroll-fix.js)
3.) But when i combine the 2, it won't scroll Horizontally, but will only scroll vertically. Wondering if it is a CSS problem.
I am doing the above because i am loading in dynamic datas into the iscroller, so i won't know the sizes and amount.
Fiddle:http://jsfiddle.net/GuCC2/28/
Here is my code.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style2.css">
<script src="js/iscroll-fix.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>
<script>
$(function loaded () {
var scroller = new Array();
$('.myclass').each(function(){
myScroller = new IScroll(this, {
scrollX: true,
scrollY: true,
snap:true,
});
scroller.push(myScroller);
});
});
loaded();
</script>
<div class="myclass">
<div id="scroller">
<div class="slide" style="background-color:red;"></div>
<div class="slide" style="background-color:green;"></div>
<div class="slide" style="background-color:blue;"></div>
<div class="slide" style="background-color:yellow;"></div>
</div>
</div>
<br />
<h1>Scrolls using scrollWidth fix</h1>
<div class="myclass">
<div id="scroller">
<div class="slide" style="background-color:red;"></div>
<div class="slide" style="background-color:green;"></div>
<div class="slide" style="background-color:blue;"></div>
<div class="slide" style="background-color:yellow;"></div>
</div>
</div>
</body>
</html>
CSS
.slide {
width:100%;
height:242px;
display:inline-block;
}
#wrapper, .myclass{
height:242px;
width:100%;
white-space: nowrap;
overflow:hidden;
position:relative;
}
.scroller {
position:relative;
}
Do you refresh the iscroll after adding data? After adding dynamic data , the width and height of the iscroll wrapper will change and you have to trigger it's refresh event. myScroller.refresh();