reading-position-indicator | Small mobile friendly reading position indicator library
kandi X-RAY | reading-position-indicator Summary
kandi X-RAY | reading-position-indicator Summary
A position indicator at the top of the page to visually display how far you have scrolled on a webpage. Build with focus on simplicity, performance and a11y. Using transform translate for best performance. rAF for throttling scroll update and debounce for resize update. Aria tags are used to support screen readers. The progress element has not been used because the code gets messy with vendor prefixes and removing the default styles that comes with each browser. It gets even messier when fallback elements are added inside the progress element to support older browsers.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of reading-position-indicator
reading-position-indicator Key Features
reading-position-indicator Examples and Code Snippets
Community Discussions
Trending Discussions on reading-position-indicator
QUESTION
I want to show a Reading Position Indicator on my site. Unfortunately, the site is much longer than the text to read. The content is inside a single DIV called "content-wrapper".
At the moment I'm using the HTML5 progress element (https://dev.w3.org/html5/spec-preview/the-progress-element.html) and added it to my site like in this example: https://css-tricks.com/reading-position-indicator/
It's working fine so far. The problem is, that the progress is calculated based on the lenght of the whole page. Is there any way to limit the progress on a single DIV?
This is my JS code:
...ANSWER
Answered 2017-Nov-20 at 19:28You are using height of whole window. You should use "your div's height". like:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install reading-position-indicator
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page