Permalink
Browse files

added scroll-content demo

  • Loading branch information...
1 parent fee5b28 commit 380a2ed6a470f22b61f874dafc9665d66d50feb0 @erwinelling erwinelling committed Mar 20, 2012
Showing with 306 additions and 0 deletions.
  1. +306 −0 scroll-content.html
View
@@ -0,0 +1,306 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+ <style>
+
+ body {
+ font: 14px/20px 'Helvetica', 'Helvetica Neue', 'Arial';
+ }
+
+ #overflow {
+ width: 100%;
+ max-width: 500px;
+ height: 500px;
+ border: 1px inset;
+ overflow: hidden;
+ position: relative;
+ background: #eee;
+ -webkit-transform: translateZ(0);
+ }
+
+ #overflow .content {
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ padding: 10px;
+ width: 480px;
+ background: #fff;
+ box-shadow: 0 0 5px #666;
+ }
+
+ #overflow .scrollbar {
+ position: absolute;
+ z-index: 10;
+ top: 2px;
+ bottom: 2px;
+ right: 2px;
+ width: 4px;
+ overflow: hidden;
+ }
+
+ #overflow .scrollbar div {
+ width: 4px;
+ overflow: hidden;
+ border-radius: 6px;
+ background: rgba(0,0,0,.5);
+ position: absolute;
+ left: 0;
+ }
+
+
+ </style>
+</head>
+
+<body>
+
+<div id="overflow">
+ <div class="scrollbar"><div></div></div>
+ <div class="content">
+ <h1>HTML Ipsum Presents</h1>
+
+ <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+ <h2>Header Level 2</h2>
+
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ol>
+
+ <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+ <h3>Header Level 3</h3>
+
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ul>
+ <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+ <h2>Header Level 2</h2>
+
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ol>
+
+ <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+ <h3>Header Level 3</h3>
+
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ul>
+
+ <h2>Header Level 2</h2>
+
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ol>
+
+ <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+ <h3>Header Level 3</h3>
+
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ul>
+ <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+ <h2>Header Level 2</h2>
+
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ol>
+
+ <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+ <h3>Header Level 3</h3>
+
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ul>
+ <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+ <h2>Header Level 2</h2>
+
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ol>
+
+ <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+ <h3>Header Level 3</h3>
+
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ul>
+
+ <h2>Header Level 2</h2>
+
+ <ol>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ol>
+
+ <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+ <h3>Header Level 3</h3>
+
+ <ul>
+ <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+ <li>Aliquam tincidunt mauris eu risus.</li>
+ </ul>
+ </div>
+</div>
+
+<div id="debug" style="white-space:pre;"></div>
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script src="https://raw.github.com/eightmedia/hammer.js/master/hammer.js"></script>
+<script>
+
+
+ function TouchScroll(container, options)
+ {
+ container = $(container);
+ var content = $(">.content", container);
+ var scrollbar = $(">.scrollbar div", container);
+
+ var self = this;
+
+ /**
+ * setup hammer
+ */
+ var hammer = new Hammer(container, {
+ prevent_default: true,
+
+ drag: true,
+ drag_vertical: true,
+ drag_horizontal: true,
+ drag_min_distance: 0,
+
+ transform: false,
+ tap: false,
+ tap_double: false,
+ hold: false
+ });
+
+ /**
+ * get the position of scrolled content
+ */
+ function getScrollPosition() {
+ return {
+ top: parseInt(content.css('top'), 10),
+ left: parseInt(content.css('left'), 10)
+ };
+ }
+
+
+ /**
+ * get the dimensions of a element
+ * @param jQuery el
+ * @return object { width: int, height: int }
+ */
+ function getDimensions( el ) {
+ return {
+ width: el.outerWidth(),
+ height: el.outerHeight()
+ };
+ }
+
+
+ var scroll_start = {};
+ var scroll_dim = {};
+ var content_dim = {};
+
+ /**
+ * ondragstart
+ */
+ hammer.ondragstart = function() {
+ scroll_start = getScrollPosition();
+
+ // get width / height of container, content
+ scroll_dim = getDimensions( container );
+ content_dim = getDimensions( content );
+
+ // set height of scrollbar and fade nicely
+ scrollbar.css({
+ height: (100 / content_dim.height * scroll_dim.height) * (scroll_dim.height/100)
+ }).stop().fadeTo(80, 1);
+ };
+
+ /**
+ * ondrag
+ */
+ hammer.ondrag = function( ev ) {
+ var distance = null;
+
+ // when dragging up
+ if(ev.direction == hammer.DIRECTION.UP) {
+ distance = -ev.distance;
+ }
+
+ // when dragging down
+ if(ev.direction == hammer.DIRECTION.DOWN){
+ distance = ev.distance
+ }
+
+ // if dragging up or down
+ if(distance){
+
+ // set top offset
+ var top = scroll_start.top + distance;
+ content.css({ top: top });
+
+ // set scrollbar offset
+ scrollbar.css({
+ top: (100 / content_dim.height) * (0 - top) +"%"
+ });
+ }
+ };
+
+ /**
+ * ondragend
+ */
+ hammer.ondragend = function( ev ) {
+ var scroll = getScrollPosition();
+
+ // correct if drag higher than top, lower than bottom
+ var corrections = {};
+
+ // correct to 0
+ if(scroll.top > 0) {
+ corrections.top = 0;
+ }
+
+ // correct to total height
+ else if(scroll.top < -(content_dim.height - scroll_dim.height) ) {
+ corrections.top = -(content_dim.height - scroll_dim.height);
+ }
+
+ // animate content
+ content.animate(corrections, 400);
+
+ // animate scrollbar back to its position
+ scrollbar.stop().animate({
+ top: (100 / content_dim.height) * (0 - corrections.top) +"%"
+ }, 400).stop().fadeTo(80, 0);
+
+ };
+ }
+
+ var scroll = new TouchScroll("#overflow");
+
+</script>
+</body>
+</html>

0 comments on commit 380a2ed

Please sign in to comment.