Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="window">
  <h1>Minha janelinha</h1>
  <p>Minions ipsum belloo! Potatoooo la bodaaa hahaha wiiiii hana dul sae poopayee chasy. Ti aamoo! tank yuuu! Chasy tatata bala tu. Hana dul sae tatata bala tu uuuhhh uuuhhh uuuhhh para tú gelatooo wiiiii para tú ti aamoo! Daa baboiii hahaha hana dul sae underweaaar hahaha bananaaaa bananaaaa. Jiji hahaha poulet tikka masala jeje. Pepete hahaha underweaaar baboiii bananaaaa jeje daa po kass ti aamoo!</p>
  <p>Tank yuuu! uuuhhh para tú butt poopayee. Tatata bala tu ti aamoo! La bodaaa bananaaaa underweaaar bee do bee do bee do daa uuuhhh baboiii. Para tú bananaaaa bee do bee do bee do bananaaaa chasy uuuhhh bananaaaa. Uuuhhh jeje po kass la bodaaa gelatooo uuuhhh uuuhhh poopayee. Uuuhhh jeje pepete para tú uuuhhh hahaha baboiii. Poopayee hana dul sae potatoooo ti aamoo! Bappleees me want bananaaa! La bodaaa uuuhhh potatoooo chasy poopayee. Butt bananaaaa pepete aaaaaah poopayee para tú jiji bee do bee do bee do chasy. Gelatooo jiji pepete wiiiii baboiii underweaaar tulaliloo.</p>
  <p>Chasy wiiiii underweaaar tatata bala tu wiiiii. Jiji pepete hana dul sae poulet tikka masala underweaaar poopayee hana dul sae jiji. Bee do bee do bee do me want bananaaa! Jeje gelatooo pepete. Me want bananaaa! tulaliloo bee do bee do bee do tulaliloo belloo! Pepete chasy ti aamoo! Belloo! jiji ti aamoo! Poulet tikka masala la bodaaa. Para tú butt butt daa belloo! Tatata bala tu bananaaaa uuuhhh wiiiii baboiii tank yuuu! Para tú bananaaaa la bodaaa gelatooo tatata bala tu. Baboiii potatoooo ti aamoo! La bodaaa me want bananaaa! Hahaha jiji po kass uuuhhh jiji.</p>
  <p>Chasy wiiiii underweaaar tatata bala tu wiiiii. Jiji pepete hana dul sae poulet tikka masala underweaaar poopayee hana dul sae jiji. Bee do bee do bee do me want bananaaa! Jeje gelatooo pepete. Me want bananaaa! tulaliloo bee do bee do bee do tulaliloo belloo! Pepete chasy ti aamoo! Belloo! jiji ti aamoo! Poulet tikka masala la bodaaa. Para tú butt butt daa belloo! Tatata bala tu bananaaaa uuuhhh wiiiii baboiii tank yuuu! Para tú bananaaaa la bodaaa gelatooo tatata bala tu. Baboiii potatoooo ti aamoo! La bodaaa me want bananaaa! Hahaha jiji po kass uuuhhh jiji.</p>
  <p>Chasy wiiiii underweaaar tatata bala tu wiiiii. Jiji pepete hana dul sae poulet tikka masala underweaaar poopayee hana dul sae jiji. Bee do bee do bee do me want bananaaa! Jeje gelatooo pepete. Me want bananaaa! tulaliloo bee do bee do bee do tulaliloo belloo! Pepete chasy ti aamoo! Belloo! jiji ti aamoo! Poulet tikka masala la bodaaa. Para tú butt butt daa belloo! Tatata bala tu bananaaaa uuuhhh wiiiii baboiii tank yuuu! Para tú bananaaaa la bodaaa gelatooo tatata bala tu. Baboiii potatoooo ti aamoo! La bodaaa me want bananaaa! Hahaha jiji po kass uuuhhh jiji.</p>
  <p>Chasy wiiiii underweaaar tatata bala tu wiiiii. Jiji pepete hana dul sae poulet tikka masala underweaaar poopayee hana dul sae jiji. Bee do bee do bee do me want bananaaa! Jeje gelatooo pepete. Me want bananaaa! tulaliloo bee do bee do bee do tulaliloo belloo! Pepete chasy ti aamoo! Belloo! jiji ti aamoo! Poulet tikka masala la bodaaa. Para tú butt butt daa belloo! Tatata bala tu bananaaaa uuuhhh wiiiii baboiii tank yuuu! Para tú bananaaaa la bodaaa gelatooo tatata bala tu. Baboiii potatoooo ti aamoo! La bodaaa me want bananaaa! Hahaha jiji po kass uuuhhh jiji.</p>
  <p>Bappleees bee do bee do bee do gelatooo me want bananaaa! Me want bananaaa! tatata bala tu potatoooo pepete gelatooo me want bananaaa! Me want bananaaa! Underweaaar poopayee po kass jiji. Tatata bala tu tulaliloo bananaaaa uuuhhh para tú potatoooo daa. Potatoooo para tú para tú bee do bee do bee do bee do bee do bee do me want bananaaa! Me want bananaaa! Hana dul sae bananaaaa. Bappleees uuuhhh chasy tulaliloo. Baboiii la bodaaa potatoooo uuuhhh gelatooo hahaha aaaaaah tulaliloo uuuhhh hahaha tatata bala tu. Poopayee butt bee do bee do bee do hahaha gelatooo para tú. Bananaaaa butt tulaliloo gelatooo chasy chasy wiiiii.</p>
</div>
<p>Quantidade de disparos: <span id="counter"></span></p>
              
            
!

CSS

              
                html {
}

#window {
  border: 3px solid #666;
  font-family: sans-serif;
  font-size: 1.2rem;
  margin: 20px;
  max-height: 140px;
  overflow-y: scroll
}

h1 {
  padding-bottom: 20px;
  text-transform: uppercase
}

p {
  font-size: 1rem;
  padding-bottom: 15px
}

h1, p {
  padding-left: 20px
}
              
            
!

JS

              
                const windowElm = document.querySelector("#window")
const counterElm = document.querySelector("#counter")
let counter = 0

windowElm.addEventListener("scroll", function(event) {
  counterElm.innerHTML = counter++
})
              
            
!
999px

Console