Permalink
Browse files

Option to prevent all default scrolling, only listen to viewpager scr…

…oll independent on direction
  • Loading branch information...
1 parent 5ce5ccf commit aa6578fb7edb49233f27d0f78ffe553976c021d0 @antonj committed Jan 21, 2014
View
@@ -1,4 +1,4 @@
-;(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
/*global module*/
'use strict';
@@ -91,6 +91,7 @@ function ViewPager(elem, options) {
options = options || {};
var ANIM_DURATION_MAX = options.anim_duration !== undefined ? options.anim_duration : 200,
PAGES = options.pages !== undefined ? options.pages : false,
+ PREVENT_ALL_NATIVE_SCROLLING = options.prevent_all_native_scrolling !== undefined ? options.prevent_all_native_scrolling : false,
DIRECTION_HORIZONTAL = !options.vertical,
container = window,
elem_size = DIRECTION_HORIZONTAL ? elem.offsetWidth : elem.offsetHeight,
@@ -191,14 +192,14 @@ function ViewPager(elem, options) {
}
}
- if (!is_active) {
+ if (!is_active && !PREVENT_ALL_NATIVE_SCROLLING) {
is_dragging = false;
Events.add(elem, ev_start_name, this);
Events.remove(container, ev_move_name, this);
Events.remove(container, ev_end_name, this);
return false;
}
- e.preventDefault(); // prevent default scrolling
+ e.preventDefault(); // Scrolling in right direction prevent default scroll
is_animating = false; // Stop animations
@@ -317,5 +318,4 @@ function ViewPager(elem, options) {
module.exports = ViewPager;
window.ViewPager = ViewPager;
-},{"./events":1,"./raf":2,"./utils":3}]},{},[4])
-;
+},{"./events":1,"./raf":2,"./utils":3}]},{},[4])
View
Oops, something went wrong.
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0" />
+ <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
+ <title></title>
+ </head>
+ <body>
+ <div class="pager">
+ <!-- <button id="prev">prev</button> -->
+ <!-- <button id="next">next</button> -->
+ <div class="pager_items">
+ <img draggable="false" style="background: url(http://nicenicejpg.com/1024); background-size: cover; background-position: center;" />
+ <img draggable="false" style="background: url(http://placekitten.com/1024); background-size: cover; background-position: center;" />
+ <img draggable="false" style="background: url(http://placebear.com/1024/1024); background-size: cover; background-position: center;" />
+ </div>
+ </div>
+ <script type="text/javascript" src="../../dist/viewpager.js"></script>
+ <script type="text/javascript" src="main.js"></script>
+ </body>
+</html>
@@ -0,0 +1,32 @@
+/*global ViewPager*/
+
+var item_container = document.querySelector('.pager_items');
+var view_pager_elem = document.querySelector('.pager');
+var w = view_pager_elem.offsetWidth;
+var h = view_pager_elem.offsetHeight;
+
+var vp = new ViewPager(view_pager_elem, {
+ pages: item_container.children.length,
+ vertical: true,
+ prevent_all_native_scrolling: true,
+ onPageScroll : function (offset, page) {
+ console.log(offset, page);
+ item_container.style['-webkit-transform'] = 'translate3d(0px, ' + ((-offset * h) - (page * h)) + 'px, 0px)';
+
+ },
+
+ onPageChange : function (page) {
+ console.log('page', page);
+ },
+
+ onSizeChanged : function(width, height) {
+ w = width;
+ }
+});
+
+// document.getElementById('prev').addEventListener('click', function () {
+// vp.previous();
+// });
+// document.getElementById('next').addEventListener('click', function () {
+// vp.next();
+// });
@@ -0,0 +1,26 @@
+html, body {
+ margin: 0;
+ padding: 0;
+}
+
+.pager {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+.pager_items {
+ width: 100%;
+ height: 300%;
+ overflow: hidden;
+ outline: 1px solid blue;
+}
+
+img {
+ position: relative;
+ display: block;
+ width: 100%;
+ height: 33.3333333333%;
+ outline: 1px solid red;
+}
View
@@ -9,6 +9,7 @@ function ViewPager(elem, options) {
options = options || {};
var ANIM_DURATION_MAX = options.anim_duration !== undefined ? options.anim_duration : 200,
PAGES = options.pages !== undefined ? options.pages : false,
+ PREVENT_ALL_NATIVE_SCROLLING = options.prevent_all_native_scrolling !== undefined ? options.prevent_all_native_scrolling : false,
DIRECTION_HORIZONTAL = !options.vertical,
container = window,
elem_size = DIRECTION_HORIZONTAL ? elem.offsetWidth : elem.offsetHeight,
@@ -109,14 +110,14 @@ function ViewPager(elem, options) {
}
}
- if (!is_active) {
+ if (!is_active && !PREVENT_ALL_NATIVE_SCROLLING) {
is_dragging = false;
Events.add(elem, ev_start_name, this);
Events.remove(container, ev_move_name, this);
Events.remove(container, ev_end_name, this);
return false;
}
- e.preventDefault(); // prevent default scrolling
+ e.preventDefault(); // Scrolling in right direction prevent default scroll
is_animating = false; // Stop animations

0 comments on commit aa6578f

Please sign in to comment.