javascript - "ion-scroll" - not able to scroll vertically -
i have written code horizontal image slider using ion-scroll. working properly. want page should scrollable vertically also.
can't scroll whole page swiping on contents inside <ion-scroll> (marked area in image). can scroll page swiping outside marked area. if change direction="xy" can scroll inside <ion-scroll> contents only.
<ion-content> <ion-scroll zooming="false" direction="x" style="width: 100%;"> <div style="width: {{albumdetail.sliderwidth}}; repeat"> <span ng-repeat="list in albumdetail.lists"> <a href="#/app/browse/albums/{{albumdetail.type}}/{{list.id}}"><button id="album-card" class="button button-light"> <img width="140px" height="140px" src="{{list.albumart}}"/> <p id="album-name-card">{{list.albumname}}</p> </button></a> </span> </div> </ion-scroll> </ion-content> 
so has been long standing issue, there way work lot of code: going post here , give link codepen
html:
<html ng-app="ionicapp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>ionic template</title> <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"> <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"> </script> </head> <body ng-controller="myctrl"> <ion-nav-view> <ion-view title="check in portugal aptece"> <ion-content class="padding" delegate-handle="mainscroll"> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <ion-scroll direction="x" zooming="false" delegate-handle="horizontal" horizontal-scroll-fix="mainscroll"> <p>lorem ipsum dolor sit consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos @ minus eos optio dolore iure amet totam officia.<br/>lorem ipsum dolor sit consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos @ minus eos optio dolore iure amet totam officia.</p> </ion-scroll> <ion-scroll direction="x" zooming="false" delegate-handle="horizontal2" horizontal-scroll-fix="mainscroll"> <p>lorem ipsum dolor sit consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos @ minus eos optio dolore iure amet totam officia.<br/>lorem ipsum dolor sit consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae venim quos @ minus eos optio dolore iure amet totam officia.</p> </ion-scroll> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <img src="http://imgs.xkcd.com/comics/cloud.png" style="border: 0px; width:744px; height:233px; vertical-align: bottom;"> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p><p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> <p> lorem ipsum dolor sit amet, consectetur adipisicing elit. soluta suscipit doloremque exercitationem vero placeat ducimus est quam perspiciatis beatae veniam quos @ minus eos optio dolore iure amet totam officia. </p> </ion-content> </ion-view> </ion-nav-view> </body> </html> css:
body { cursor: url('http://ionicframework.com/img/finger.png'), auto; } ion-scroll { width: 100%; font-size: 40px; height: auto; white-space: nowrap; padding: 10px; line-height: 40px; } js:
angular.module('ionicapp', ['ionic']) .controller('myctrl', function($scope, $ionicscrolldelegate, $timeout) { $timeout(function(){ //return false; // <--- comment "fix" problem var sv = $ionicscrolldelegate.$getbyhandle('horizontal').getscrollview(); var container = sv.__container; var originaltouchstart = sv.touchstart; var originalmousedown = sv.mousedown; var originaltouchmove = sv.touchmove; var originalmousemove = sv.mousemove; container.removeeventlistener('touchstart', sv.touchstart); container.removeeventlistener('mousedown', sv.mousedown); document.removeeventlistener('touchmove', sv.touchmove); document.removeeventlistener('mousemove', sv.mousemove); sv.touchstart = function(e) { e.preventdefault = function(){} originaltouchstart.apply(sv, [e]); } sv.touchmove = function(e) { e.preventdefault = function(){} originaltouchmove.apply(sv, [e]); } sv.mousedown = function(e) { e.preventdefault = function(){} originalmousedown.apply(sv, [e]); } sv.mousemove = function(e) { e.preventdefault = function(){} originalmousemove.apply(sv, [e]); } container.addeventlistener("touchstart", sv.touchstart, false); container.addeventlistener("mousedown", sv.mousedown, false); document.addeventlistener("touchmove", sv.touchmove, false); document.addeventlistener("mousemove", sv.mousemove, false); }); $timeout(function(){ //return false; // <--- comment "fix" problem var sv = $ionicscrolldelegate.$getbyhandle('horizontal2').getscrollview(); var container = sv.__container; var originaltouchstart = sv.touchstart; var originalmousedown = sv.mousedown; var originaltouchmove = sv.touchmove; var originalmousemove = sv.mousemove; container.removeeventlistener('touchstart', sv.touchstart); container.removeeventlistener('mousedown', sv.mousedown); document.removeeventlistener('touchmove', sv.touchmove); document.removeeventlistener('mousemove', sv.mousemove); sv.touchstart = function(e) { e.preventdefault = function(){} originaltouchstart.apply(sv, [e]); } sv.touchmove = function(e) { e.preventdefault = function(){} originaltouchmove.apply(sv, [e]); } sv.mousedown = function(e) { e.preventdefault = function(){} originalmousedown.apply(sv, [e]); } sv.mousemove = function(e) { e.preventdefault = function(){} originalmousemove.apply(sv, [e]); } container.addeventlistener("touchstart", sv.touchstart, false); container.addeventlistener("mousedown", sv.mousedown, false); document.addeventlistener("touchmove", sv.touchmove, false); document.addeventlistener("mousemove", sv.mousemove, false); }); }); // scroll fix directive (function() { var horizontalscrollfix = (function() { function horizontalscrollfix($timeout, $ionicscrolldelegate) { return { restrict: 'a', link: function(scope, element, attrs) { var mainscrollid = attrs.horizontalscrollfix, scrollid = attrs.delegatehandle; var geteventtouches = function(e) { return e.touches && (e.touches.length ? e.touches : [ { pagex: e.pagex, pagey: e.pagey } ]); }; var fixhorizontalandverticalscroll = function() { var mainscroll, scroll; mainscroll = $ionicscrolldelegate.$getbyhandle(mainscrollid).getscrollview(); scroll = $ionicscrolldelegate.$getbyhandle(scrollid).getscrollview(); // patch touchstart scroll.__container.removeeventlistener('touchstart', scroll.touchstart); scroll.touchstart = function(e) { var starty; scroll.startcoordinates = ionic.tap.pointercoord(e); if (ionic.tap.ignorescrollstart(e)) { return; } scroll.__isdown = true; if (ionic.tap.containsoristextinput(e.target) || e.target.tagname === 'select') { scroll.__hasstarted = false; return; } scroll.__isselectable = true; scroll.__enablescrolly = true; scroll.__hasstarted = true; scroll.dotouchstart(geteventtouches(e), e.timestamp); starty = mainscroll.__scrolltop; // below our changes method // e.preventdefault(); // lock main scroll if scrolling horizontal $timeout((function() { var animate, ymovement; ymovement = starty - mainscroll.__scrolltop; if (scroll.__isdragging && ymovement < 2.0 && ymovement > -2.0) { mainscroll.__istracking = false; mainscroll.dotouchend(); animate = false; return mainscroll.scrollto(0, starty, animate); } else { return scroll.dotouchend(); } }), 100); }; scroll.__container.addeventlistener('touchstart', scroll.touchstart); }; $timeout(function() { fixhorizontalandverticalscroll(); }); } }; } return horizontalscrollfix; })(); angular.module('ionicapp').directive('horizontalscrollfix', ['$timeout', '$ionicscrolldelegate', horizontalscrollfix]); }).call(this); 
Comments
Post a Comment