Examples

By default the scrollbars are positioned bottom or right as per browser standard.

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis orci, iaculis ac ornare ac, blandit sed massa. Mauris venenatis tempor blandit. Nullam eget odio pulvinar, semper neque vitae, fermentum dolor. Duis fermentum purus ac massa tristique molestie. Vivamus sit amet nulla aliquet eros dapibus imperdiet id id mi. Mauris gravida, nisl eget hendrerit bibendum, velit purus tempor nibh, eget tincidunt massa augue quis turpis. Nullam varius suscipit libero, sit amet congue neque egestas et. Vestibulum ac mattis justo. Ut et nisl fringilla, scelerisque lectus ac, pellentesque dolor. Sed vitae convallis sem. Donec tristique, sem non pellentesque accumsan, velit risus aliquam eros, vel porttitor dui felis sed lectus. Phasellus eleifend augue in purus blandit porttitor. Mauris iaculis ante vitae mi dignissim malesuada. Aliquam suscipit magna vitae vestibulum tincidunt. Ut ipsum ligula, volutpat id rhoncus in, tempus in libero. Quisque elementum aliquam consectetur.

Class

lazybars-y

Sample HTML

<div class="lazybars-y">
    ...
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis orci, iaculis ac ornare ac, blandit sed massa. Mauris venenatis tempor blandit. Nullam eget odio pulvinar, semper neque vitae, fermentum dolor. Duis fermentum purus ac massa tristique molestie. Vivamus sit amet nulla aliquet eros dapibus imperdiet id id mi. Mauris gravida, nisl eget hendrerit bibendum, velit purus tempor nibh, eget tincidunt massa augue quis turpis. Nullam varius suscipit libero, sit amet congue neque egestas et. Vestibulum ac mattis justo. Ut et nisl fringilla, scelerisque lectus ac, pellentesque dolor. Sed vitae convallis sem. Donec tristique, sem non pellentesque accumsan, velit risus aliquam eros, vel porttitor dui felis sed lectus. Phasellus eleifend augue in purus blandit porttitor. Mauris iaculis ante vitae mi dignissim malesuada. Aliquam suscipit magna vitae vestibulum tincidunt.

Class

lazybars-x

Sample HTML

<div class="lazybars-x">
    ...
</div>

Offset

Show offset example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis orci, iaculis ac ornare ac, blandit sed massa. Mauris venenatis tempor blandit. Nullam eget odio pulvinar, semper neque vitae, fermentum dolor. Duis fermentum purus ac massa tristique molestie. Vivamus sit amet nulla aliquet eros dapibus imperdiet id id mi. Mauris gravida, nisl eget hendrerit bibendum, velit purus tempor nibh, eget tincidunt massa augue quis turpis. Nullam varius suscipit libero, sit amet congue neque egestas et. Vestibulum ac mattis justo. Ut et nisl fringilla, scelerisque lectus ac, pellentesque dolor. Sed vitae convallis sem. Donec tristique, sem non pellentesque accumsan, velit risus aliquam eros, vel porttitor dui felis sed lectus. Phasellus eleifend augue in purus blandit porttitor. Mauris iaculis ante vitae mi dignissim malesuada. Aliquam suscipit magna vitae vestibulum tincidunt.

Class

lazybars-y

Data Attributes

data-offset="5"

Sample HTML

<div class="lazybars-y" data-offset="5">
    ...
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis orci, iaculis ac ornare ac, blandit sed massa. Mauris venenatis tempor blandit. Nullam eget odio pulvinar, semper neque vitae, fermentum dolor. Duis fermentum purus ac massa tristique molestie. Vivamus sit amet nulla aliquet eros dapibus imperdiet id id mi. Mauris gravida, nisl eget hendrerit bibendum, velit purus tempor nibh, eget tincidunt massa augue quis turpis. Nullam varius suscipit libero, sit amet congue neque egestas et. Vestibulum ac mattis justo. Ut et nisl fringilla, scelerisque lectus ac, pellentesque dolor. Sed vitae convallis sem. Donec tristique, sem non pellentesque accumsan, velit risus aliquam eros, vel porttitor dui felis sed lectus. Phasellus eleifend augue in purus blandit porttitor. Mauris iaculis ante vitae mi dignissim malesuada. Aliquam suscipit magna vitae vestibulum tincidunt.

Class

lazybars-x

Data Attributes

data-offset="5"

Sample HTML

<div class="lazybars-x" data-offset="5">
    ...
</div>

Fade

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis orci, iaculis ac ornare ac, blandit sed massa. Mauris venenatis tempor blandit. Nullam eget odio pulvinar, semper neque vitae, fermentum dolor. Duis fermentum purus ac massa tristique molestie. Vivamus sit amet nulla aliquet eros dapibus imperdiet id id mi. Mauris gravida, nisl eget hendrerit bibendum, velit purus tempor nibh, eget tincidunt massa augue quis turpis. Nullam varius suscipit libero, sit amet congue neque egestas et. Vestibulum ac mattis justo. Ut et nisl fringilla, scelerisque lectus ac, pellentesque dolor. Sed vitae convallis sem. Donec tristique, sem non pellentesque accumsan, velit risus aliquam eros, vel porttitor dui felis sed lectus. Phasellus eleifend augue in purus blandit porttitor. Mauris iaculis ante vitae mi dignissim malesuada. Aliquam suscipit magna vitae vestibulum tincidunt.

Class

lazybars-y

Data Attributes

data-fade="true"

Sample HTML

<div class="lazybars-y" data-fade="true">
    ...
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis orci, iaculis ac ornare ac, blandit sed massa. Mauris venenatis tempor blandit. Nullam eget odio pulvinar, semper neque vitae, fermentum dolor. Duis fermentum purus ac massa tristique molestie. Vivamus sit amet nulla aliquet eros dapibus imperdiet id id mi. Mauris gravida, nisl eget hendrerit bibendum, velit purus tempor nibh, eget tincidunt massa augue quis turpis. Nullam varius suscipit libero, sit amet congue neque egestas et. Vestibulum ac mattis justo. Ut et nisl fringilla, scelerisque lectus ac, pellentesque dolor. Sed vitae convallis sem. Donec tristique, sem non pellentesque accumsan, velit risus aliquam eros, vel porttitor dui felis sed lectus. Phasellus eleifend augue in purus blandit porttitor. Mauris iaculis ante vitae mi dignissim malesuada. Aliquam suscipit magna vitae vestibulum tincidunt.

Class

lazybars-x

Data Attributes

data-fade="true"

Sample HTML

<div class="lazybars-x" data-fade="true">
    ...
</div>