Conversation
- Added properties to WebView to hide vertical and horizontal scroll indicators for a cleaner interface. - Implemented a minimal custom scrollbar in gutkaScript.js for improved user experience during scrolling, ensuring visibility on both Android and iOS. - Updated gutkahtml.js to include styles for the new scrollbar, enhancing the overall aesthetic and functionality of the ReaderScreen.
Gauravjeetsingh
left a comment
Gauravjeetsingh
left a comment
There was a problem hiding this comment.
Mainly needs update with code indentation and variable names.
Also, I am curious why are we creating a custom scrollbar, can you please let me know the issue with the default scrollbar?
| const p=Math.max(0,Math.min(1,(window.pageYOffset||0)/h)); | ||
| const th=Math.max(30,(window.innerHeight/h)*window.innerHeight); | ||
| const t=sb.children[0]; | ||
| if(t){t.style.height=th+"px";t.style.top=(p*(window.innerHeight-th))+"px";} |
There was a problem hiding this comment.
This feels very congested and difficult to read. Can you please fix the indentation and use proper variable names, instead of single letter variables.
| scrollToPosition(); | ||
| scrollToPosition(); | ||
|
|
||
| // Minimal scrollbar - works on Android and iOS |
There was a problem hiding this comment.
Can you please add some explanation, on the purpose of this code, is this removing an existing div with id #sb and then adding another div with same id sb?
There was a problem hiding this comment.
This is added as defensive logic to handle cases where the screen may load multiple times, preventing duplicate scrollbars from being created.
There was a problem hiding this comment.
We can't add a condition that if this div exists, do not add another? Why do we need to remove and add?
src/ReaderScreen/utils/gutkahtml.js
Outdated
| text-align:right | ||
| } | ||
| /* Minimal scrollbar */ | ||
| #sb { position:fixed; right:0; top:0; width:6px; height:100vh; z-index:99999; pointer-events:none; } |
There was a problem hiding this comment.
Can you fix the indentation here as well.
- Improved the CSS formatting for the custom scrollbar in gutkahtml.js for better readability and maintainability. - Enhanced the updateSB function in gutkaScript.js to improve the logic for displaying the scrollbar, ensuring it adapts correctly to the content height and window size. - Cleaned up code formatting for consistency across both files.
- Renamed variables for clarity, changing 'sb' to 'scrollbar' to enhance code readability. - Updated the updateSB function to updateScrollbar, improving the logic for scrollbar visibility and positioning. - Enhanced the scrollFunc to utilize the new updateScrollbar function, ensuring consistent behavior during scroll events. - Cleaned up code formatting for better maintainability.
|
Updated the description. |
src/ReaderScreen/utils/gutkahtml.js
Outdated
| } | ||
| #sb-t { | ||
| position: absolute; | ||
| right: 1; |
There was a problem hiding this comment.
This should either be 0, or 1px, right? Is there a reason for it being 1 without the unit?
| scrollbar.appendChild(scrollbarThumb); | ||
| document.body.appendChild(scrollbar); | ||
| setTimeout(updateScrollbar, 100); | ||
| window.addEventListener("resize", updateScrollbar); |
There was a problem hiding this comment.
Everytime the window.onload fires, it adds a new resize listener without removing the previous one. Maybe store its reference somewhere, and use that to add a condition that if the listener already exists, remove it before adding a new one.
- Updated the scrollbar CSS in gutkahtml.js to specify the unit for the right position, ensuring proper rendering. - Added a resize listener in gutkaScript.js to improve scrollbar responsiveness, removing any existing listener before adding a new one for better performance. - Cleaned up code formatting for consistency and maintainability across both files.
2 participants
Previously, Android and iOS relied on their native scrollbars. However, WebView doesn’t allow reliable customization of scrollbar colors, which affected readability. As Scrollbar is hidden in Dark mode.
To address this and improve the reading experience of the Bani, I implemented a custom scrollbar.
Before
After Adding Scrollbar
