All geek questions in one place

IScroll up

I am creating a jQuery mobile page (in conjunction with jCarousel), but I'm currently having problems with iScroll The red section of the page scrolls, but when I scroll down, it automatically scrolls the backup. I read various allusions to this problem, but none of them

Page: http://de-raedt.eu/researchpad/index.html

+4
source share
2 answers

The problem in your code is that all the content is displayed in a div wrapper, so the scroller is no longer used, because there is no content that is not displayed. However, the gray area on your page just overlaps the contents of the wrapper div.i adjusted the size of the div wrapper so that the scroller scrolls the contents.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> <head> <title>ResearchPad</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="scrollview.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> <script type="text/javascript" src="iscroll.js"></script> <!-- jCarousel library --> <script type="text/javascript" src="researchpad.js"></script> <!-- jCarousel skin stylesheet --> <link rel="stylesheet" type="text/css" href="skin.css" /> <style type="text/css"> /** * Overwrite for having a carousel with dynamic width. */ .jcarousel-skin-tango .jcarousel-container-horizontal { width: 100%; } .jcarousel-skin-tango .jcarousel-clip-horizontal { width: 100%; height: 300px; } div#sidebar{ position:absolute; top:0; bottom:0; left:0; width:75px; height:100%; background-color: yellow; } </style> <script type="text/javascript"> var myScroll; function loaded() { myScroll = new iScroll('wrapper'); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); /* * * * * * * * * * Use this for high compatibility (iDevice + Android) * */ document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); function carousel_callback( carousel, state) { // BWA-HA...I have the carousel now....FEEL THE POWER! // reset empties it out $('#reset-caro').click( function( evt ) { carousel.reset(); }); // here how to call add $('#add-to').click( function( evt ) { carousel.add((jQuery('#mycarousel').jcarousel('size') + 1), "<li style='width: 50%;'><div style='background-color: green;'>ADDED PAGE</div></li>"); carousel.size(jQuery('#mycarousel').jcarousel('size') + 1); jQuery('#mycarousel').jcarousel('scroll',jQuery('#mycarousel').jcarousel('size')); }); } jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ initCallback: carousel_callback }); //$('testje').scrollview(); $('.foo').live('swipeleft swiperight',function(event){ console.log(event.type); if (event.type == "swipeleft") { jQuery('#mycarousel').jcarousel('next'); } if (event.type == "swiperight") { jQuery('#mycarousel').jcarousel('prev'); } event.preventDefault(); }); }); </script> </head> <body> <!-- Start of first page --> <div data-role="page" class="foo" data-position:fixed> <div data-role="content" style="padding: 0px"> <div id="sidebar" class="sidebar" style="float: left; width: 75px;">Sidebar</div> <div id="mainContent" style="float: left; top: 0; bottom: 0; background-color:blue; width: 100%; margin-left: 75px;"> <ul id="mycarousel" class="jcarousel-skin-tango"> <li style="width: 50%;"> <div style="background-color: red;" id="testje"> <div id="wrapper" data-role="content" style="height: 270px;"> <div id="scroller" > This is an example of how big a one page simple site can be.<br> <a id="add-to" href="#">add</a> <br> Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur. At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat. Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. Ietm hae magnitu dine for super oper mari aggere. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Navigandi ad nunc. Que neque pedibus ipsorum, naves ad hunc mod arm aeque, erant fere situs oppi dorum ut facilus. Vada ac desussum aestus exipe aditurn habere ex alto. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta. Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur. At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat. Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. Ietm hae magnitu dine for super oper mari aggere. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Navigandi ad nunc. Que neque pedibus ipsorum, naves ad hunc mod arm aeque, erant fere situs oppi dorum ut facilus. Vada ac desussum aestus exipe aditurn habere ex alto. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta. Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur. At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat. Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. Ietm hae magnitu dine for super oper mari aggere. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Navigandi ad nunc. Que neque pedibus ipsorum, naves ad hunc mod arm aeque, erant fere situs oppi dorum ut facilus. Vada ac desussum aestus exipe aditurn habere ex alto. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta. Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur. At lupatum delenit aigue duos dolor tempor sunt in culpa qui officia d dereud facils est er expedit distinc peccand quaerer en imigent cupidat. Incita visset, accom ex robore ad quam vis vadisen vlavis confecs nis revinc tae. Ietm hae magnitu dine for super oper mari aggere. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Navigandi ad nunc. Que neque pedibus ipsorum, naves ad hunc mod arm aeque, erant fere situs oppi dorum ut facilus. Vada ac desussum aestus exipe aditurn habere ex alto. Oppidi his mowni bus suifs fortunis desp erate coe magno recipei ban ibi se rursus isdem opport unitel rursus isdem opport loci defen porti busi. Situs era eod oppi dorum, ut posta.<br><br><br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> </div> </div></div></li> <li style="width: 50%;"><div style="background-color: green;">Page 2<br><br><br></div></li> </ul></div> </div><!-- /content --> </div><!-- /page --> </body> </html>
0
source

#wrapper { position: absolute; top: 0px; bottom: 0px; }

I just met this problem and fixed it, make sure your wrapper div position is absolute or fixed, and the top and bottom are defined.

0
source

Source: https://habr.com/ru/post/1399573/

More articles:


All Articles