Skip to content

Commit

Permalink
Scroll Snap examples for guides
Browse files Browse the repository at this point in the history
  • Loading branch information
@rachelandrew
rachelandrew committed Dec 6, 2018
1 parent 5c294a3 commit 8efb121
Show file tree
Hide file tree
Showing 7 changed files with 698 additions and 0 deletions.
112 changes: 112 additions & 0 deletions scroll-snap/align.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>CSS Scroll Snap - scroll-snap-align</title>
<link rel="stylesheet" href="../css-cookbook/styles.css">
<style>
.scroller {
border: 4px solid #333;
width: 300px;
}

.scroller section {
min-height: 100%;
padding: 10px;
}

.scroller section:nth-child(odd) {
background-color: #ccc;
}
</style>

<style class="editable">
.scroller {
height: 200px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}

.scroller section {
scroll-snap-align: start;
}
</style>
</head>

<body>
<section class="preview">
<article class="scroller">
<section>
<h2>Section one</h2>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
raisin horseradish spinach carrot soko.</p>

<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>

</section>
<section>
<h2>Section two</h2>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
raisin horseradish spinach carrot soko. </p>
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>


</section>
<section>
<h2>Section three</h2>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
raisin horseradish spinach carrot soko.</p>
<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>


</section>
</article>
</section>

<textarea class="playable playable-css" style="height: 170px;">.scroller {
height: 200px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}

.scroller section {
scroll-snap-align: start;
}</textarea>

<textarea class="playable playable-html" style="height: 230px;">
<article class="scroller">
<section>
<h2>Section one</h2>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>

<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>
</section>
<section>
<h2>Section two</h2>

<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>

<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>
</section>
<section>
<h2>Section three</h2>

<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>

<p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard.</p>
</section>
</article>
</textarea>


<div class="playable-buttons">
<input id="reset" type="button" value="Reset">
</div>
</body>
<script src="../css-cookbook/playable.js"></script>

</html>
102 changes: 102 additions & 0 deletions scroll-snap/mandatory-proximity.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>CSS Scroll Snap - Mandatory or Proximity</title>
<link rel="stylesheet" href="../css-cookbook/styles.css">
<style>
.scroller {
border: 4px solid #333;
width: 300px;
}

.scroller section {
min-height: 100%;
padding: 10px;
}

.scroller section:nth-child(odd) {
background-color: #ccc;
}
</style>

<style class="editable">
.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}

.scroller section {
scroll-snap-align: start;
}
</style>
</head>

<body>
<section class="preview">
<article class="scroller">
<section>
<h2>Section one</h2>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
raisin horseradish spinach carrot soko.</p>

</section>
<section>
<h2>Section two</h2>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
raisin horseradish spinach carrot soko. </p>


</section>
<section>
<h2>Section three</h2>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water
spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert
raisin horseradish spinach carrot soko.</p>


</section>
</article>
</section>

<textarea class="playable playable-css" style="height: 170px;">.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}

.scroller section {
scroll-snap-align: start;
}</textarea>

<textarea class="playable playable-html" style="height: 230px;">
<article class="scroller">
<section>
<h2>Section one</h2>
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
</section>
<section>
<h2>Section two</h2>

<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
</section>
<section>
<h2>Section three</h2>

<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
</section>
</article>
</textarea>


<div class="playable-buttons">
<input id="reset" type="button" value="Reset">
</div>
</body>
<script src="../css-cookbook/playable.js"></script>

</html>
97 changes: 97 additions & 0 deletions scroll-snap/mandatory-y-old-spec.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>CSS Scroll Snap - old specification</title>
<link rel="stylesheet" href="../css-cookbook/styles.css">
<style>
.scroller {
border: 4px solid #333;
width: 300px;
}

.scroller section {
min-height: 100%;
padding: 10px;
}

.scroller section:nth-child(odd) {
background-color: #ccc;
}
</style>

<style class="editable">
.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-points-y: repeat(320px);
scroll-snap-destination: 0 0;
scroll-snap-type: y mandatory;
scroll-snap-type: mandatory;
}

.scroller section {
scroll-snap-align: start;
}
</style>
</head>

<body>
<section class="preview">
<article class="scroller">
<section>
<h2>Section one</h2>


</section>
<section>
<h2>Section two</h2>



</section>
<section>
<h2>Section three</h2>



</section>
</article>
</section>

<textarea class="playable playable-css" style="height: 170px;">.scroller {
height: 300px;
overflow-y: scroll;
scroll-snap-points-y: repeat(320px);
scroll-snap-destination: 0 0;
scroll-snap-type: y mandatory;
scroll-snap-type: mandatory;
}

.scroller section {
scroll-snap-align: start;
}</textarea>

<textarea class="playable playable-html" style="height: 230px;">
<article class="scroller">
<section>
<h2>Section one</h2>
</section>
<section>
<h2>Section two</h2>
</section>
<section>
<h2>Section three</h2>
</section>
</article>
</textarea>


<div class="playable-buttons">
<input id="reset" type="button" value="Reset">
</div>
</body>
<script src="../css-cookbook/playable.js"></script>

</html>
Loading

0 comments on commit 8efb121

Please sign in to comment.