Responsive Web Layout Without Scrolling - noscroll.js

The noscroll.js jQuery plugin helps you create responsive, dynamic, nested, full-window web layout without scrolling.

The plugin provides the function noscroll.addLayout for HTML page layouts meant to work with resizing, without any scrolling, and with varying layouts by toggling or by dimension, where element dimensions are defined by CSS width and height in percentage. The HTML behavior of newline counting as whitespace is removed so your layout definition can use multiple lines. Sibling elements without defined dimensions are set to fill the available space equally, and when only some sibling elements have dimensions defined the rest take up the remaining space equally. Elements are centered horizontally and vertically within their space.

How to use it:

1. Include the noscroll.js plugin after you've loaded the latest jQuery library (slim build).

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="noscroll.js"></script>

2. The JavaScript to create a basic web layout with 2 columns.

noscroll.addLayout(1, 0, `
  <div>Hello,</div>
  <div>World!</div>
`);
noscroll.addLayout(noscroll.LayoutMaxRatio, 0, `
  <div class="inline">Hello,</div>
  <div class="inline">World!</div>
`);

3. The JavaScript to create a complex web layout with nested grids.

noscroll.addLayout(0.8, 0, `
  <div>
      <div>Hello,</div>
      <div>Hello,</div>
      <div>Hello,</div>
  </div>
  <div>
      <div>World!</div>
      <div>World!</div>
      <div>World!</div>
  </div>
`);
noscroll.addLayout(1.5, 0, `
  <div>
      <div>Hello,</div>
      <div>Hello,</div>
      <div>
          <div class="inline">Hello,</div>
          <div class="inline">Hello,</div>
          <div class="inline">Hello,</div>
      </div>
  </div>
  <div>
      <div>World!</div>
      <div>
          <div class="inline">World!</div>
          <div class="inline">World!</div>
          <div class="inline">World!</div>
      </div>
      <div>World!</div>
  </div>
`);
noscroll.addLayout(noscroll.LayoutMaxRatio, 0, `
  <div class="inline">
      <div class="inline">
          <div>Hello,</div>
          <div>Hello,</div>
          <div>Hello,</div>
      </div>
      <div class="inline">
          <div>Hello,</div>
          <div>Hello,</div>
          <div>Hello,</div>
      </div>
  </div>
  <div class="inline">
      <div>World!</div>
      <div>
          <div>World!</div>
          <div>World!</div>
          <div>World!</div>
      </div>
      <div>World!</div>
  </div>
`);

---

This awesome jQuery plugin is developed by pciet. For more Advanced Usages, please check the demo page or visit the official website.