cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <script type="text/jsx">
/** @jsx React.DOM */

var cancelScrollEvent = function (e) {
  e.stopImmediatePropagation();
  e.preventDefault();
  e.returnValue = false;
  return false;
};

var addScrollEventListener = function (elem, handler) {
  elem.addEventListener('wheel', handler, false);
};

var removeScrollEventListener = function (elem, handler) {
  elem.removeEventListener('wheel', handler, false);
};

var ScrollLockMixin = {
  scrollLock: function (elem) {
    elem = elem || this.getDOMNode();
    this.scrollElem = elem;
    addScrollEventListener(elem, this.onScrollHandler);
  },
  
  scrollRelease: function (elem) {
    elem = elem || this.scrollElem;
    removeScrollEventListener(elem, this.onScrollHandler);
  },
  
  onScrollHandler: function (e) {
    var elem = this.scrollElem;
    var scrollTop = elem.scrollTop;
    var scrollHeight = elem.scrollHeight;
    var height = elem.clientHeight;
    var wheelDelta = e.deltaY;
    var isDeltaPositive = wheelDelta > 0;

    if (isDeltaPositive && wheelDelta > scrollHeight - height - scrollTop) {
      elem.scrollTop = scrollHeight;
      return cancelScrollEvent(e);
    }
    else if (!isDeltaPositive && -wheelDelta > scrollTop) {
      elem.scrollTop = 0;
      return cancelScrollEvent(e);
    }
  }
};

var App = React.createClass({
  render: function () {
    return <div className="app">
      <LongView />
      <ShortView />
    </div>
  }
});

var LongView = React.createClass({
  render: function () {
    return <div className="long">
      <LongContent />
    </div>;
  }
});

var ShortView = React.createClass({
  mixins: [ScrollLockMixin],
  
  componentDidMount: function () {
    this.scrollLock();
  },
  
  componentWillUnmount: function () {
    this.scrollRelease();
  },
  
  render: function () {
    return <div className="short-wrap scrollY">
      <div className="short">
        <ShortContent />
      </div>
    </div>;
  }
});

// Content Views
// -------------

var ShortContent = React.createClass({
  render: function () {
    return <div className="short-content">
      <p>Try scrolling me.</p>
      <p><strong>Default Behavior:</strong></p>
      <p>When you scroll to the bottom the back view will start scrolling.</p>
      <p><strong>Custom Behavior:</strong></p>
      <p>We’ve applied the Scroll Lock Mixin to this React component. You should not notice the back view scrolling while your cursor is over this element.</p>
    </div>;
  }
});

var LongContent = React.createClass({
  render: function () {
    return <div>
      <h1>Chris Coyier is my Hero&hellip;</h1>
      <blockquote>I just want to say that everything I know about WordPress, I’ve learned from Chris Coyier. He’s taught me a lot about semantic HTML and CSS, too.
        <footer>
          <cite>— <a href="http://designgeekess.com/sweet-site/chris-coyier-is-my-hero/">Niki</a></cite>
        </footer>
      </blockquote>

      <blockquote>Beyond a shadow of a doubt, my single biggest influence in web has been Mr. Chris Coyier, curator of CSS-Tricks. I know this, because there probably isn’t a single website that I’ve constructed since I found CSS-Tricks that hasn’t benefited from the use of something I gleaned from Chris’ website.

        <footer>
        <cite>— <a href="http://blog.duaneneveu.com/2239/my-web-hero-chris-coyier/">Duane Neveu</a></cite>
        </footer>
      </blockquote>

      <blockquote>
        &hellip;he has started some great projects, and for that he has been turned into a “Hero” to web developers and designers...
        <footer><cite>— <a href="http://blog.teamtreehouse.com/kill-your-heroes#comment-24176">Aaron Brewer</a></cite></footer>
      </blockquote>

      <blockquote>
        One of my favorite internet-famous people, Chris Coyier, just became even more of a hero to me.
        <footer><cite>— <a href="http://tinynow.com/blog/chris-coyier-hacker/">Matt</a></cite></footer>
      </blockquote>

      <blockquote>
        Whether he knows it or not, Chris Coyier has to be my CSS Yoda...If you’re out there Chris and you read this…Mucho, Mucho thanks for all that you do in the community 
        <footer><cite>— <a href="http://blog.grayghostvisuals.com/developers/my-web-heros/">Dennis Gaebel</a></cite></footer>
      </blockquote>
    </div>;
  }
});

var app = React.renderComponent(<App />, document.body);
</script>
            
          
!
            
              html, body, .app {
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
}

body,
.scrollY {
  overflow-y: auto;
}

.long {
  min-height: 150%;
}

.short-wrap {
  position: fixed;
  top: 0;
  left: 0;
  height: 250px;
  width: 150px;
}
.short {
  width: 100%;
  min-height: 100%;
}

// Demo Styles
// -----------

@import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(http://fonts.googleapis.com/css?family=Cardo:400,400italic);

h1 {
  font-family: 'Abril Fatface', cursive;
  font-size: 48px;
  color: #eee;
}

blockquote {
  font-family: 'Cardo', serif;
  font-size: 24px;
  font-style: italic;
  line-height: 32px;
  color: #ddd;
}

cite, 
a, 
a:active, 
a:hover {
  color: #888;
  font-style: normal;
  text-decoration: none;
}

.long {
  padding: 80px 180px;
  text-shadow: 0 0 3px #000;
  background: #333;
  background-image: url('https://dl.dropboxusercontent.com/u/14898/Photos/NSTexturedFullScreenBackgroundColor.png');
}

.short {
  color: #333;
  background: #ccc;
}

.short-content {
  font-family: Helvetica, sans-serif;
  padding: 24px 12px;
  margin: 0;
  
  p {
    margin: 0;
    padding: 0.5em 0;
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console