summaryrefslogtreecommitdiffstats
path: root/examples/webkit/webkit-guide/css3_scroll.htm
diff options
context:
space:
mode:
Diffstat (limited to 'examples/webkit/webkit-guide/css3_scroll.htm')
-rw-r--r--examples/webkit/webkit-guide/css3_scroll.htm94
1 files changed, 94 insertions, 0 deletions
diff --git a/examples/webkit/webkit-guide/css3_scroll.htm b/examples/webkit/webkit-guide/css3_scroll.htm
new file mode 100644
index 0000000..c2d3ea7
--- /dev/null
+++ b/examples/webkit/webkit-guide/css3_scroll.htm
@@ -0,0 +1,94 @@
+<!--
+
+This file is part of QtWebKit
+
+Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+All rights reserved.
+
+You may use this file under the terms of the BSD license as follows:
+
+"Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+o Redistributions of source code must retain the above copyright
+ notice, this list of conditions and the following disclaimer.
+
+o Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ documentation and/or other materials provided with the distribution.
+
+o Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+ the names of its contributors may be used to endorse or promote
+ products derived from this software without specific prior written
+ permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+<meta name='viewport' content='width=device-width' />
+<title>Custom Scrollbars</title>
+<link href='css/css3_scroll.css' type='text/css' rel='stylesheet'/>
+</head>
+<body>
+<section>
+<article>
+<h3>Custom Scrollbars</h3>
+
+<p>
+Unlike standard text, linebreaks cannot appear arbitrarily within
+blocks of code. Wide lines may be difficult to read within a
+narrow-screen mobile interface:
+</p>
+
+<pre>
+window.onload = function() {
+ var aside = document.querySelector('#related');
+ document.querySelector('#main').addEventListener('mouseup', function(event){
+ var thresholdDec = 0.5;
+ var totalHeight = event.currentTarget.scrollHeight;
+ var tapHeight = event.layerY;
+ var tapHeightDec = tapHeight / totalHeight;
+ var minHeight = 360;
+ if ( tapHeight < minHeight ) aside.className = '';
+ if (tapHeightDec > thresholdDec ) {
+ aside.className = 'visible';
+ }
+ else {
+ aside.className = '';
+ }
+ });
+};
+</pre>
+
+<p>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat
+gravida viverra. Vivamus ipsum felis, cursus sed venenatis nec, tempus
+ac tellus. Praesent luctus, risus eu vestibulum mollis, arcu mauris
+mollis ante, id mollis risus lectus ornare nisl. Aenean elementum arcu
+sed nibh faucibus pellentesque. Aliquam erat volutpat. Mauris tempor,
+urna at dignissim pellentesque, velit lacus dictum sem, non porttitor
+felis nulla nec risus. Donec a massa felis, a congue purus. Nullam et
+turpis diam. Aenean vestibulum egestas metus, eu sodales dolor
+venenatis quis. Aenean augue orci, facilisis et convallis ut, egestas
+at neque.
+</p>
+
+</article>
+</section>
+</body>
+</html>