<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Basic ScrollView Without a Scroll Indicator</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Basic ScrollView Without a Scroll Indicator</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><div class="intro">
<p>This example shows how to create a basic ScrollView widget. The base ScrollView widget doesn't have a scrollbar indicator or pagination support.</p>
</div>
<div class="example newwindow">
<a href="scrollview-base-example.html" target="_blank" class="button">
View Example in New Window
</a>
</div>
<h2>The Basic ScrollView Widget</h2>
<p>In this example, we'll create a basic ScrollView instance, without any additional feature plugins applied. This is the lightest version of the ScrollView widget. In later examples, we'll see how we can pull in different modules and plugins to provide additional features.</p>
<h3>Modules Used</h3>
<p>Since we only need the basic scrollview for this example, we pull in the <code>scrollview-base</code> module, the lightest version of ScrollView:</p>
<pre class="code prettyprint">YUI().use('scrollview-base', function(Y) {
...
});</pre>
<p>The <code>scrollview-base</code> module provides a ScrollView without any plugins applied. We'll see in the <a href="scrollview.html">Scrollview With Scroll Indicators</a> example, that the <code>scrollview</code> module provides a base ScrollView bundled with scroll indicator support.</p>
<h3>Instantiating The ScrollView Widget</h3>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
<p>The ScrollView provides support for scrollable content. In general this content can be anything, but most often it is in the form of a list, to be scrolled through. For this example, we'll provide the content for the scrollview in the form of a list, as shown below:</p>
<pre class="code prettyprint"><div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li>AC/DC</li>
<li>Aerosmith</li>
<li>Billy Joel</li>
<li>Bob Dylan</li>
...
</ul>
</div></pre>
<p>We add the <code>yui3-scrollview-loading</code> class as described in the <a href="../widget/index.html#hidingmarkup">Widget Progressive Enhancement</a> section, and provide a custom rule to hide this progressively enhanced content while the scrollview is being rendered:</p>
<pre class="code prettyprint">.yui3-js-enabled .yui3-scrollview-loading {
visibility:hidden;
}</pre>
<p>To instantiate the ScrollView instance, we provide it with the <code>srcNode</code> attribute during construction, so it uses the markup above for it's content, as shown below. We could also add the content dynamically, however providing the markup on the page, allows users without JavaScript enabled to still see the content.</p>
<pre class="code prettyprint">YUI().use('scrollview-base', function(Y) {
var scrollView = new Y.ScrollView({
id:"scrollview",
srcNode: '#scrollview-content',
height: 310,
flick: {
minDistance:10,
minVelocity:0.3,
axis: "y"
}
});
scrollView.render();
});</pre>
<p>For this example, since we want a vertically scrolling ScrollView widget, we also give it a height during construction. Without the height, the ScrollView widget would be as tall as it's content list, and there would be no need to scroll. We also give the ScrollView widget bounding box an id ("scrollview") which we can target in the example CSS. Finally, we constrain flicks so that only flicks along the "y" axis are picked up.</p>
<p>As the last step, to see the functional ScrollView on the page, we call <code>scrollView.render()</code>.</p>
<h3>Controlling Sensitivity</h3>
<p>The scroll dynamics for the ScrollView widget can be controlled by tweaking the following attributes, either during construction or after:</p>
<dl>
<dt>flick</dt>
<dd>Defines the minimum distance and/or minimum velocity which define a flick. It can be set to 0 to disable flick support completely.</dd>
<dt>bounce</dt>
<dd>Defines how quickly the velocity of the scrollview content decreases during a bounce (when the scrollview hits the edge of it's scroll limits). It can be set to 0 to disable bounce completely.</dd>
<dt>deceleration</dt>
<dd>Defines how quickly the velocity of the scrollview content decreases in response to a flick.</dd>
</dl>
<p>Additional details about these parameters and a few other static properties which can be used to modify scroll dynamics are discussed in the <a href="index.html#attributes">ScrollView documentation</a>.</p>
<h3>Modifying Layout For Small Screen Devices</h3>
<p>This example also shows how you can modify the look and feel for your page/application, based on the size of the device you're delivering it to. For this example, when the maximum width of the device is 480px or less, we provide additional CSS rules which hide additional content and make the scrollview a full screen Widget, using media queries:</p>
<pre class="code prettyprint"><link media="handheld, only screen and (max-device-width: 480px)"
href="../assets/scrollview/examples-smallscreen.css"
type="text/css"
rel="stylesheet"></pre>
<p>The CSS in the above file, which is only served to devices matching the criteria in the <code>media</code> attribute, hides additional content and makes the ScrollView fill the width of the browser:</p>
<pre class="code prettyprint">#additional-content {
display:none;
}
.yui3-scrollview {
border:0;
margin:0;
width:100%;
float:none;
}</pre>
<h2>Complete Example Source</h2>
<p>
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the
page's <code><body></code> element or to a parent element of the widget in order to apply
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>.
</p>
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre>
<pre class="code prettyprint"><div id="scrollview-container">
<div id="scrollview-header">
<h1>Basic ScrollView</h1>
</div>
<div id="scrollview-content" class="yui3-scrollview-loading">
<ul>
<li>AC/DC</li>
<li>Aerosmith</li>
<li>Billy Joel</li>
<li>Bob Dylan</li>
<li>Bob Seger</li>
<li>Bon Jovi</li>
<li>Bruce Springsteen</li>
<li>Creed</li>
<li>Creedence Clearwater Revival</li>
<li>Dave Matthews Band</li>
<li>Def Leppard</li>
<li>Eagles</li>
<li>Eminem</li>
<li>Fleetwood Mac</li>
<li>Green Day</li>
<li>Guns N' Roses</li>
<li>James Taylor</li>
<li>Jay-Z</li>
<li>Jimi Hendrix</li>
<li>Led Zeppelin</li>
<li>Lynyrd Skynyrd</li>
<li>Metallica</li>
<li>Motley Crue</li>
<li>Neil Diamond</li>
<li>Nirvana</li>
<li>Ozzy Osbourne</li>
<li>Pearl Jam</li>
<li>Pink Floyd</li>
<li>Queen</li>
<li>Rod Stewart</li>
<li>Rush</li>
<li>Santana</li>
<li>Simon and Garfunkel</li>
<li>Steve Miller Band</li>
<li>The Beatles</li>
<li>The Doors</li>
<li>The Police</li>
<li>The Rolling Stones</li>
<li>Tom Petty</li>
<li>U2</li>
<li>Van Halen</li>
<li>Willie Nelson</li>
<li>ZZ Top</li>
</ul>
</div>
</div>
<div id="additional-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam hendrerit elit id vulputate. Pellentesque pellentesque erat rutrum velit facilisis sodales convallis tellus lacinia. Curabitur gravida mi sit amet nulla suscipit sed congue dolor volutpat. Aenean sem tortor, pretium et euismod in, imperdiet sit amet urna. Ut ante nisi, auctor mattis suscipit a, ullamcorper eget leo. Phasellus sagittis ante at lectus rutrum ut sollicitudin sem malesuada. Duis ultrices sapien et nulla tincidunt malesuada. Mauris ante turpis, dignissim eu tincidunt vitae, placerat quis diam. In augue nisl, cursus at rutrum ut, scelerisque et erat. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris orci dui, aliquam ut convallis ut, dapibus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Mauris placerat elit id lectus rhoncus in dignissim justo mollis. Donec nec odio sapien. In iaculis euismod felis non laoreet. Mauris ornare varius neque, et congue erat porta a. Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam hendrerit elit id vulputate. Pellentesque pellentesque erat rutrum velit facilisis sodales convallis tellus lacinia. Curabitur gravida mi sit amet nulla suscipit sed congue dolor volutpat. Aenean sem tortor, pretium et euismod in, imperdiet sit amet urna. Ut ante nisi, auctor mattis suscipit a, ullamcorper eget leo. Phasellus sagittis ante at lectus rutrum ut sollicitudin sem malesuada. Duis ultrices sapien et nulla tincidunt malesuada. Mauris ante turpis, dignissim eu tincidunt vitae, placerat quis diam. In augue nisl, cursus at rutrum ut, scelerisque et erat. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris orci dui, aliquam ut convallis ut, dapibus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Mauris placerat elit id lectus rhoncus in dignissim justo mollis. Donec nec odio sapien. In iaculis euismod felis non laoreet. Mauris ornare varius neque, et congue erat porta a. Aliquam nec auctor lectus. Etiam ut ipsum a nibh iaculis fringilla.</p>
</div>
<script type="text/javascript" charset="utf-8">
YUI().use('scrollview-base', function(Y) {
var scrollview = new Y.ScrollView({
id:"scrollview",
srcNode: '#scrollview-content',
height: 310,
flick: {
minDistance:10,
minVelocity:0.3,
axis: "y"
}
});
scrollview.render();
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="This example creates a basic ScrollView which doesn't include a scrollbar indicator.">
<a href="scrollview-base.html">Basic ScrollView Without a Scroll Indicator</a>
</li>
<li data-description="This example shows the classic Scrollview implementation, including scroll indicators (bars) and including code to suppress link navigation while scrolling.">
<a href="scrollview-scroll.html">ScrollView with Scroll Indicator and Link Suppression Behavior</a>
</li>
<li data-description="This example creates a horizontal ScrollView.">
<a href="scrollview-horiz.html">Horizontal ScrollView</a>
</li>
<li data-description="This example creates a horizontal ScrollView with pagination support.">
<a href="scrollview-paging.html">ScrollView With Pagination</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/scrollview',
name: 'scrollview-base',
title: 'Basic ScrollView Without a Scroll Indicator',
newWindow: 'true',
auto: false
};
YUI.Env.Tests.examples.push('scrollview-base');
YUI.Env.Tests.examples.push('scrollview-scroll');
YUI.Env.Tests.examples.push('scrollview-horiz');
YUI.Env.Tests.examples.push('scrollview-paging');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>