[up-viewport] - Unpoly

Marks this element as a scrolling container ("viewport").

Apply this attribute if your app uses a custom panel layout with fixed positioning instead of scrolling the document's scrolling element. Alternatively, you can also push a selector matching your custom viewport to the up.viewport.config.viewportSelectors array.

When scrolling, Unpoly will always scroll the viewport closest to the updated element. By default this is the document's scrolling element.

Elements with the [up-viewport] attribute must also have a derivable target selector.

Example

Here is an example of a layout for an e-mail client, showing a list of e-mails on the left side and the e-mail text on the right side:

.side {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  overflow-y: scroll;
}

.main {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 100px;
  right: 0;
  overflow-y: scroll;
}

This would be the HTML (notice the up-viewport attribute):

<div class="side" up-viewport>
  <a href="/emails/5001" up-target=".main">Re: Your invoice</a>
  <a href="/emails/2023" up-target=".main">Quote for services</a>
  <a href="/emails/9002" up-target=".main">Fwd: Room reservation</a>
</div>

<div class="main" up-viewport>
  <h1>Re: Your Invoice</h1>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    Stet clita kasd gubergren, no sea takimata sanctus est.
  </p>
</div>

up.viewport [up-viewport] HTML attribute

Example

up.viewport [up-viewport]
HTML attribute