JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jquery-appear.googlecode.com/files/jquery.appear-1.1.1.js"></script>
<div id="container-with-columns">
<p>You've killed me! Oh, you've killed me! Ok, we'll go deliver this crate like professionals, and then we'll go ride the bumper cars. Check it out, y'all. Everyone who was invited is here. Come, Comrade Bender! We must take to the streets! You know the worst thing about being a slave? They make you work, but they don't pay you or let you go. I never loved you.</p>
<p>Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife holding up? …To shreds, you say. Who am I making this out to? We're rescuing ya. Say it in Russian! No argument here.</p>
<p>Stop! Don't shoot fire stick in space canoe! Cause explosive decompression! I haven't felt much of anything since my guinea pig died. Bender, you risked your life to save me! I'm Santa Claus!</p>
<p>No! The cat shelter's on to me. Fatal. I am the man with no name, Zapp Brannigan! Now that the, uh, garbage ball is in space, Doctor, perhaps you can help me with my sexual inhibitions?</p>
<p>Please, Don-Bot… look into your hard drive, and open your mercy file! I guess because my parents keep telling me to be more ladylike. As though! Bender, we're trying our best. Michelle, I don't regret this, but I both rue and lament it.</p>
<p>No! Don't jump! Who are those horrible orange men? Hello Morbo, how's the family? Yeah, I do that with my stupidness. I guess if you want children beaten, you have to do it yourself. OK, if everyone's finished being stupid.</p>
<p>This is the worst kind of discrimination: the kind against me! File not found. I can explain. It's very valuable.</p>
<p>Yes, except the Dave Matthews Band doesn't rock. Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic beverages! What are you hacking off? Is it my torso?! 'It is!' My precious torso! And until then, I can never die? Fry, you can't just sit...
CSS
#container-with-columns
{
height: 600px;
-webkit-column-width: 600px;
-webkit-column-count: auto;
}
.all-done
{
background-color: #cfc;
}
#scroll-check
{
/* Keep it to the right of the last column so the user can read all the text */
float: right;
color: red;
background-color: yellow;
padding: 0.3em;
}
JavaScript
$(function() {
var $scrollCheck = $("#scroll-check");
var $body = $("body");
// Set "one" to false to re-request confirmation
var appearOptions = {
one: false
};
$scrollCheck.appear(function() {
// The javascript confirm dialog screws up the scrolling a bit
// by locking mouse focus on the scroll slider (tested in Chrome 16 on Windows)
// Showing a confirm dialog in HTML would not.
if (confirm("Do you agree to our TOC?")) {
$body.addClass("all-done");
}
else {
$body.removeClass("all-done");
}
}, appearOptions)
});