Skip to Main Content

Scroll ProgressBar

This item plug-in creates a ProgressBar which tracks the scrolling of a designated element in the Page.
Scroll tracking can be calculated from different positions:
  • Vertical Scrolling: Top to Bottom, Bottom to Top
  • Horizontal Scrolling: Left to Right, Right to left
The following JS calls can be used for the plugin:
  • apex.item('ITEMNAME').getValue() : Gets the current status of the ScrollingBar which is number between 0 and 1.
  • apex.item('ITEMNAME').setValue(someValue) : Sets the current status of the ScrollingBar which can be number between 0 and 1.
  • apex.item('ITEMNAME').show() : Shows the Scrolling Bar.
  • apex.item('ITEMNAME').hide() : Hides the Scrolling Bar.

Left to Right - Horizontal Bar

Left to Right lorem container

Quis hendrerit facilisi massa lectus nisl vestibulum fermentum lacus montes nibh. Nec habitant viverra pharetra in fames fusce sociis ac turpis sollicitudin mattis. Faucibus sed enim sagittis quam nullam vel natoque maecenas semper, aptent cras pharetra. Fringilla fringilla tempus elementum pulvinar ultrices parturient aliquam ullamcorper congue. Cum dignissim hendrerit sit. Mollis mus quisque rutrum. Auctor mi nisl libero felis. Porttitor fusce suscipit ultrices. Nulla vivamus suspendisse phasellus. Netus, torquent sem per pretium aliquet nec? Tortor nisi maecenas suscipit donec nulla fermentum porta quisque leo, platea porttitor. Magna luctus pulvinar mi porttitor sit ante maecenas!

Tellus bibendum, etiam vehicula viverra parturient aliquet nulla dictum. Nibh urna curabitur suspendisse. Curabitur ante elit praesent nibh enim. Mattis id nullam senectus eu, praesent donec massa. Rhoncus parturient vulputate phasellus faucibus a mi nisl? Hendrerit convallis et posuere suspendisse luctus quam magnis ante taciti montes torquent posuere. Taciti vel cubilia ridiculus varius hendrerit! Ligula hac neque amet cursus ullamcorper nostra fusce duis etiam dignissim enim phasellus. Sollicitudin vehicula cursus ante ligula sollicitudin? Praesent vivamus litora.

Varius fames elit donec venenatis hendrerit feugiat eros mi. Nulla ut ultrices pharetra laoreet vel erat fermentum nullam. Lobortis per conubia ultricies cum sagittis tempus fringilla ac vehicula sociis, urna fringilla. Malesuada cum ultrices torquent dignissim metus class amet erat. Ultrices leo nec bibendum senectus, augue nunc consequat. Ad accumsan convallis neque bibendum lectus cum habitasse porttitor orci litora praesent? Aliquet amet tortor parturient egestas gravida eu. Sociis venenatis himenaeos tincidunt penatibus senectus nostra sociis adipiscing ullamcorper quisque turpis tincidunt. Fames tellus cubilia.

Platea risus scelerisque feugiat? Aliquet ligula lobortis et dictum viverra mauris sapien vehicula tellus. Taciti himenaeos proin rutrum vulputate quisque. Netus sagittis ornare auctor mus consequat. Lorem primis lobortis massa primis libero lacus aptent vitae viverra quisque. Vehicula vivamus feugiat phasellus himenaeos nec sodales felis hac vitae molestie dis tempor. Senectus quam lacus phasellus orci. In nisl vulputate sociis ac. Sapien ultricies mauris nulla integer tincidunt est gravida interdum facilisi! Dis pharetra cum molestie suscipit porta sit. Pulvinar eu ornare integer laoreet tincidunt eleifend amet in tempor. Maecenas cursus gravida sagittis dignissim et phasellus etiam porta gravida.

Suscipit per suscipit magna mollis sit. Consequat bibendum nibh nulla natoque aliquam. Suscipit habitasse duis consequat ligula. Velit quam velit quis massa enim tempus sociosqu varius nam habitant nullam enim. Arcu libero sed senectus. Libero sociosqu, ultrices eu iaculis? Fusce platea facilisis inceptos ullamcorper nisl nostra orci aliquam vitae litora auctor suspendisse. Justo consectetur eget amet sed.

Right to Left - Horizontal Bar

Right to Left lorem container

Quis hendrerit facilisi massa lectus nisl vestibulum fermentum lacus montes nibh. Nec habitant viverra pharetra in fames fusce sociis ac turpis sollicitudin mattis. Faucibus sed enim sagittis quam nullam vel natoque maecenas semper, aptent cras pharetra. Fringilla fringilla tempus elementum pulvinar ultrices parturient aliquam ullamcorper congue. Cum dignissim hendrerit sit. Mollis mus quisque rutrum. Auctor mi nisl libero felis. Porttitor fusce suscipit ultrices. Nulla vivamus suspendisse phasellus. Netus, torquent sem per pretium aliquet nec? Tortor nisi maecenas suscipit donec nulla fermentum porta quisque leo, platea porttitor. Magna luctus pulvinar mi porttitor sit ante maecenas!

Tellus bibendum, etiam vehicula viverra parturient aliquet nulla dictum. Nibh urna curabitur suspendisse. Curabitur ante elit praesent nibh enim. Mattis id nullam senectus eu, praesent donec massa. Rhoncus parturient vulputate phasellus faucibus a mi nisl? Hendrerit convallis et posuere suspendisse luctus quam magnis ante taciti montes torquent posuere. Taciti vel cubilia ridiculus varius hendrerit! Ligula hac neque amet cursus ullamcorper nostra fusce duis etiam dignissim enim phasellus. Sollicitudin vehicula cursus ante ligula sollicitudin? Praesent vivamus litora.

Varius fames elit donec venenatis hendrerit feugiat eros mi. Nulla ut ultrices pharetra laoreet vel erat fermentum nullam. Lobortis per conubia ultricies cum sagittis tempus fringilla ac vehicula sociis, urna fringilla. Malesuada cum ultrices torquent dignissim metus class amet erat. Ultrices leo nec bibendum senectus, augue nunc consequat. Ad accumsan convallis neque bibendum lectus cum habitasse porttitor orci litora praesent? Aliquet amet tortor parturient egestas gravida eu. Sociis venenatis himenaeos tincidunt penatibus senectus nostra sociis adipiscing ullamcorper quisque turpis tincidunt. Fames tellus cubilia.

Platea risus scelerisque feugiat? Aliquet ligula lobortis et dictum viverra mauris sapien vehicula tellus. Taciti himenaeos proin rutrum vulputate quisque. Netus sagittis ornare auctor mus consequat. Lorem primis lobortis massa primis libero lacus aptent vitae viverra quisque. Vehicula vivamus feugiat phasellus himenaeos nec sodales felis hac vitae molestie dis tempor. Senectus quam lacus phasellus orci. In nisl vulputate sociis ac. Sapien ultricies mauris nulla integer tincidunt est gravida interdum facilisi! Dis pharetra cum molestie suscipit porta sit. Pulvinar eu ornare integer laoreet tincidunt eleifend amet in tempor. Maecenas cursus gravida sagittis dignissim et phasellus etiam porta gravida.

Suscipit per suscipit magna mollis sit. Consequat bibendum nibh nulla natoque aliquam. Suscipit habitasse duis consequat ligula. Velit quam velit quis massa enim tempus sociosqu varius nam habitant nullam enim. Arcu libero sed senectus. Libero sociosqu, ultrices eu iaculis? Fusce platea facilisis inceptos ullamcorper nisl nostra orci aliquam vitae litora auctor suspendisse. Justo consectetur eget amet sed.

Left to Right - Vertical Bar

Top to Bottom lorem container

Quis hendrerit facilisi massa lectus nisl vestibulum fermentum lacus montes nibh. Nec habitant viverra pharetra in fames fusce sociis ac turpis sollicitudin mattis. Faucibus sed enim sagittis quam nullam vel natoque maecenas semper, aptent cras pharetra. Fringilla fringilla tempus elementum pulvinar ultrices parturient aliquam ullamcorper congue. Cum dignissim hendrerit sit. Mollis mus quisque rutrum. Auctor mi nisl libero felis. Porttitor fusce suscipit ultrices. Nulla vivamus suspendisse phasellus. Netus, torquent sem per pretium aliquet nec? Tortor nisi maecenas suscipit donec nulla fermentum porta quisque leo, platea porttitor. Magna luctus pulvinar mi porttitor sit ante maecenas!

Tellus bibendum, etiam vehicula viverra parturient aliquet nulla dictum. Nibh urna curabitur suspendisse. Curabitur ante elit praesent nibh enim. Mattis id nullam senectus eu, praesent donec massa. Rhoncus parturient vulputate phasellus faucibus a mi nisl? Hendrerit convallis et posuere suspendisse luctus quam magnis ante taciti montes torquent posuere. Taciti vel cubilia ridiculus varius hendrerit! Ligula hac neque amet cursus ullamcorper nostra fusce duis etiam dignissim enim phasellus. Sollicitudin vehicula cursus ante ligula sollicitudin? Praesent vivamus litora.

Varius fames elit donec venenatis hendrerit feugiat eros mi. Nulla ut ultrices pharetra laoreet vel erat fermentum nullam. Lobortis per conubia ultricies cum sagittis tempus fringilla ac vehicula sociis, urna fringilla. Malesuada cum ultrices torquent dignissim metus class amet erat. Ultrices leo nec bibendum senectus, augue nunc consequat. Ad accumsan convallis neque bibendum lectus cum habitasse porttitor orci litora praesent? Aliquet amet tortor parturient egestas gravida eu. Sociis venenatis himenaeos tincidunt penatibus senectus nostra sociis adipiscing ullamcorper quisque turpis tincidunt. Fames tellus cubilia.

Platea risus scelerisque feugiat? Aliquet ligula lobortis et dictum viverra mauris sapien vehicula tellus. Taciti himenaeos proin rutrum vulputate quisque. Netus sagittis ornare auctor mus consequat. Lorem primis lobortis massa primis libero lacus aptent vitae viverra quisque. Vehicula vivamus feugiat phasellus himenaeos nec sodales felis hac vitae molestie dis tempor. Senectus quam lacus phasellus orci. In nisl vulputate sociis ac. Sapien ultricies mauris nulla integer tincidunt est gravida interdum facilisi! Dis pharetra cum molestie suscipit porta sit. Pulvinar eu ornare integer laoreet tincidunt eleifend amet in tempor. Maecenas cursus gravida sagittis dignissim et phasellus etiam porta gravida.

Suscipit per suscipit magna mollis sit. Consequat bibendum nibh nulla natoque aliquam. Suscipit habitasse duis consequat ligula. Velit quam velit quis massa enim tempus sociosqu varius nam habitant nullam enim. Arcu libero sed senectus. Libero sociosqu, ultrices eu iaculis? Fusce platea facilisis inceptos ullamcorper nisl nostra orci aliquam vitae litora auctor suspendisse. Justo consectetur eget amet sed.

Left to Right - Vertical Bar - Scrolling calculation starts from the bottom

Bottom to Top lorem container

Quis hendrerit facilisi massa lectus nisl vestibulum fermentum lacus montes nibh. Nec habitant viverra pharetra in fames fusce sociis ac turpis sollicitudin mattis. Faucibus sed enim sagittis quam nullam vel natoque maecenas semper, aptent cras pharetra. Fringilla fringilla tempus elementum pulvinar ultrices parturient aliquam ullamcorper congue. Cum dignissim hendrerit sit. Mollis mus quisque rutrum. Auctor mi nisl libero felis. Porttitor fusce suscipit ultrices. Nulla vivamus suspendisse phasellus. Netus, torquent sem per pretium aliquet nec? Tortor nisi maecenas suscipit donec nulla fermentum porta quisque leo, platea porttitor. Magna luctus pulvinar mi porttitor sit ante maecenas!

Tellus bibendum, etiam vehicula viverra parturient aliquet nulla dictum. Nibh urna curabitur suspendisse. Curabitur ante elit praesent nibh enim. Mattis id nullam senectus eu, praesent donec massa. Rhoncus parturient vulputate phasellus faucibus a mi nisl? Hendrerit convallis et posuere suspendisse luctus quam magnis ante taciti montes torquent posuere. Taciti vel cubilia ridiculus varius hendrerit! Ligula hac neque amet cursus ullamcorper nostra fusce duis etiam dignissim enim phasellus. Sollicitudin vehicula cursus ante ligula sollicitudin? Praesent vivamus litora.

Varius fames elit donec venenatis hendrerit feugiat eros mi. Nulla ut ultrices pharetra laoreet vel erat fermentum nullam. Lobortis per conubia ultricies cum sagittis tempus fringilla ac vehicula sociis, urna fringilla. Malesuada cum ultrices torquent dignissim metus class amet erat. Ultrices leo nec bibendum senectus, augue nunc consequat. Ad accumsan convallis neque bibendum lectus cum habitasse porttitor orci litora praesent? Aliquet amet tortor parturient egestas gravida eu. Sociis venenatis himenaeos tincidunt penatibus senectus nostra sociis adipiscing ullamcorper quisque turpis tincidunt. Fames tellus cubilia.

Platea risus scelerisque feugiat? Aliquet ligula lobortis et dictum viverra mauris sapien vehicula tellus. Taciti himenaeos proin rutrum vulputate quisque. Netus sagittis ornare auctor mus consequat. Lorem primis lobortis massa primis libero lacus aptent vitae viverra quisque. Vehicula vivamus feugiat phasellus himenaeos nec sodales felis hac vitae molestie dis tempor. Senectus quam lacus phasellus orci. In nisl vulputate sociis ac. Sapien ultricies mauris nulla integer tincidunt est gravida interdum facilisi! Dis pharetra cum molestie suscipit porta sit. Pulvinar eu ornare integer laoreet tincidunt eleifend amet in tempor. Maecenas cursus gravida sagittis dignissim et phasellus etiam porta gravida.

Suscipit per suscipit magna mollis sit. Consequat bibendum nibh nulla natoque aliquam. Suscipit habitasse duis consequat ligula. Velit quam velit quis massa enim tempus sociosqu varius nam habitant nullam enim. Arcu libero sed senectus. Libero sociosqu, ultrices eu iaculis? Fusce platea facilisis inceptos ullamcorper nisl nostra orci aliquam vitae litora auctor suspendisse. Justo consectetur eget amet sed.

Multiple Scroll Bars - Vertical

Multiple Vertical lorem container

Quis hendrerit facilisi massa lectus nisl vestibulum fermentum lacus montes nibh. Nec habitant viverra pharetra in fames fusce sociis ac turpis sollicitudin mattis. Faucibus sed enim sagittis quam nullam vel natoque maecenas semper, aptent cras pharetra. Fringilla fringilla tempus elementum pulvinar ultrices parturient aliquam ullamcorper congue. Cum dignissim hendrerit sit. Mollis mus quisque rutrum. Auctor mi nisl libero felis. Porttitor fusce suscipit ultrices. Nulla vivamus suspendisse phasellus. Netus, torquent sem per pretium aliquet nec? Tortor nisi maecenas suscipit donec nulla fermentum porta quisque leo, platea porttitor. Magna luctus pulvinar mi porttitor sit ante maecenas!

Tellus bibendum, etiam vehicula viverra parturient aliquet nulla dictum. Nibh urna curabitur suspendisse. Curabitur ante elit praesent nibh enim. Mattis id nullam senectus eu, praesent donec massa. Rhoncus parturient vulputate phasellus faucibus a mi nisl? Hendrerit convallis et posuere suspendisse luctus quam magnis ante taciti montes torquent posuere. Taciti vel cubilia ridiculus varius hendrerit! Ligula hac neque amet cursus ullamcorper nostra fusce duis etiam dignissim enim phasellus. Sollicitudin vehicula cursus ante ligula sollicitudin? Praesent vivamus litora.

Varius fames elit donec venenatis hendrerit feugiat eros mi. Nulla ut ultrices pharetra laoreet vel erat fermentum nullam. Lobortis per conubia ultricies cum sagittis tempus fringilla ac vehicula sociis, urna fringilla. Malesuada cum ultrices torquent dignissim metus class amet erat. Ultrices leo nec bibendum senectus, augue nunc consequat. Ad accumsan convallis neque bibendum lectus cum habitasse porttitor orci litora praesent? Aliquet amet tortor parturient egestas gravida eu. Sociis venenatis himenaeos tincidunt penatibus senectus nostra sociis adipiscing ullamcorper quisque turpis tincidunt. Fames tellus cubilia.

Platea risus scelerisque feugiat? Aliquet ligula lobortis et dictum viverra mauris sapien vehicula tellus. Taciti himenaeos proin rutrum vulputate quisque. Netus sagittis ornare auctor mus consequat. Lorem primis lobortis massa primis libero lacus aptent vitae viverra quisque. Vehicula vivamus feugiat phasellus himenaeos nec sodales felis hac vitae molestie dis tempor. Senectus quam lacus phasellus orci. In nisl vulputate sociis ac. Sapien ultricies mauris nulla integer tincidunt est gravida interdum facilisi! Dis pharetra cum molestie suscipit porta sit. Pulvinar eu ornare integer laoreet tincidunt eleifend amet in tempor. Maecenas cursus gravida sagittis dignissim et phasellus etiam porta gravida.

Suscipit per suscipit magna mollis sit. Consequat bibendum nibh nulla natoque aliquam. Suscipit habitasse duis consequat ligula. Velit quam velit quis massa enim tempus sociosqu varius nam habitant nullam enim. Arcu libero sed senectus. Libero sociosqu, ultrices eu iaculis? Fusce platea facilisis inceptos ullamcorper nisl nostra orci aliquam vitae litora auctor suspendisse. Justo consectetur eget amet sed.

Multiple Scroll Bars - Horizontal

Multiple Horizontal lorem container

Quis hendrerit facilisi massa lectus nisl vestibulum fermentum lacus montes nibh. Nec habitant viverra pharetra in fames fusce sociis ac turpis sollicitudin mattis. Faucibus sed enim sagittis quam nullam vel natoque maecenas semper, aptent cras pharetra. Fringilla fringilla tempus elementum pulvinar ultrices parturient aliquam ullamcorper congue. Cum dignissim hendrerit sit. Mollis mus quisque rutrum. Auctor mi nisl libero felis. Porttitor fusce suscipit ultrices. Nulla vivamus suspendisse phasellus. Netus, torquent sem per pretium aliquet nec? Tortor nisi maecenas suscipit donec nulla fermentum porta quisque leo, platea porttitor. Magna luctus pulvinar mi porttitor sit ante maecenas!

Tellus bibendum, etiam vehicula viverra parturient aliquet nulla dictum. Nibh urna curabitur suspendisse. Curabitur ante elit praesent nibh enim. Mattis id nullam senectus eu, praesent donec massa. Rhoncus parturient vulputate phasellus faucibus a mi nisl? Hendrerit convallis et posuere suspendisse luctus quam magnis ante taciti montes torquent posuere. Taciti vel cubilia ridiculus varius hendrerit! Ligula hac neque amet cursus ullamcorper nostra fusce duis etiam dignissim enim phasellus. Sollicitudin vehicula cursus ante ligula sollicitudin? Praesent vivamus litora.

Varius fames elit donec venenatis hendrerit feugiat eros mi. Nulla ut ultrices pharetra laoreet vel erat fermentum nullam. Lobortis per conubia ultricies cum sagittis tempus fringilla ac vehicula sociis, urna fringilla. Malesuada cum ultrices torquent dignissim metus class amet erat. Ultrices leo nec bibendum senectus, augue nunc consequat. Ad accumsan convallis neque bibendum lectus cum habitasse porttitor orci litora praesent? Aliquet amet tortor parturient egestas gravida eu. Sociis venenatis himenaeos tincidunt penatibus senectus nostra sociis adipiscing ullamcorper quisque turpis tincidunt. Fames tellus cubilia.

Platea risus scelerisque feugiat? Aliquet ligula lobortis et dictum viverra mauris sapien vehicula tellus. Taciti himenaeos proin rutrum vulputate quisque. Netus sagittis ornare auctor mus consequat. Lorem primis lobortis massa primis libero lacus aptent vitae viverra quisque. Vehicula vivamus feugiat phasellus himenaeos nec sodales felis hac vitae molestie dis tempor. Senectus quam lacus phasellus orci. In nisl vulputate sociis ac. Sapien ultricies mauris nulla integer tincidunt est gravida interdum facilisi! Dis pharetra cum molestie suscipit porta sit. Pulvinar eu ornare integer laoreet tincidunt eleifend amet in tempor. Maecenas cursus gravida sagittis dignissim et phasellus etiam porta gravida.

Suscipit per suscipit magna mollis sit. Consequat bibendum nibh nulla natoque aliquam. Suscipit habitasse duis consequat ligula. Velit quam velit quis massa enim tempus sociosqu varius nam habitant nullam enim. Arcu libero sed senectus. Libero sociosqu, ultrices eu iaculis? Fusce platea facilisis inceptos ullamcorper nisl nostra orci aliquam vitae litora auctor suspendisse. Justo consectetur eget amet sed.