Contact us Create app

Directory

← Back

scroll-target

<scroll-target>: Wrap things and make visible

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/fluorumlabs/scroll-target on 2019-05-10 ]

<scroll-target>

Live Demo ↗

<scroll-target> is a really simple web component for making scrolling easier. ll you need to do is to wrap the content you want to scroll to and call ensureVisibility():

<button onclick="document.getElementById('target').ensureVisibility()">Click me!</button>

...

<scroll-target id="target">
    <h2>I'm the content you want to see</h2>
    <p>...</p>
</scroll-target>

Properties

<scroll-target top-offset="<offset-in-pixels>">

top-offset defines a space that should be reserved for fixed top menu when scrolling. 0 by default. Can be changed in runtime by calling scrollTargetElement.setTopOffset(...).

Methods

scrollTargetElement.setTopOffset(<offset-in-pixels>);

setTopOffset defines a space that should be reserved for fixed top menu when scrolling. Can be set via top-offset attribute.

scrollTargetElement.ensureVisibility(<delay-in-milliseconds>);

ensureVisibility scrolls to make the wrapped content visible. If optional <delay-in-milliseconds> is specified, scrolling will be delayed by specified amount of time.

Compatibility

(Loading compatibility data...)

Last updated: 2019-04-04

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • smoothscroll#^0.3.6
Released
2019-04-04
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 1.0+
Polymer 2.0+
Browser
Browser Independent

scroll-target - Vaadin Add-on Directory

: Wrap things and make visible scroll-target - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/fluorumlabs/scroll-target](https://github.com//fluorumlabs/scroll-target/blob/v1.0.0/README.md) on 2019-05-10 ]** # <scroll-target> [Live Demo ↗]() <scroll-target> is a really simple web component for making scrolling easier. ll you need to do is to wrap the content you want to scroll to and call `ensureVisibility()`: ```html ...

I'm the content you want to see

...

 ``` ## Properties ```html ``` `top-offset` defines a space that should be reserved for fixed top menu when scrolling. `0` by default. Can be changed in runtime by calling `scrollTargetElement.setTopOffset(...)`. ## Methods ```javascript scrollTargetElement.setTopOffset(); ``` `setTopOffset` defines a space that should be reserved for fixed top menu when scrolling. Can be set via `top-offset` attribute. ```javascript scrollTargetElement.ensureVisibility(); ``` `ensureVisibility` scrolls to make the wrapped content visible. If optional `` is specified, scrolling will be delayed by specified amount of time.
Online