Skip to content

Added Scroll bar for bani reader #361

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
amitojsingh wants to merge 6 commits into
base: dev
Choose a base branch
from
Draft

Added Scroll bar for bani reader #361

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
aa892d0
Enhance ReaderScreen with custom scrollbar and WebView improvements
amitojsingh Dec 17, 2025
6c95120
Refactor scrollbar styles and update functionality in ReaderScreen
amitojsingh Dec 19, 2025
7aed587
Refactor scrollbar functionality in gutkaScript.js
amitojsingh Dec 19, 2025
664a810
Fix scrollbar styling and enhance resize handling in ReaderScreen
amitojsingh Dec 24, 2025
54d7530
Merge branch 'dev' into 303-bug-scroll-bar-is-missing
amitojsingh Dec 24, 2025
de86a0e
update comment
amitojsingh Dec 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/ReaderScreen/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,8 @@ const Reader = ({ navigation, route }) => {
<WebView
key={webViewKey}
webviewDebuggingEnabled
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
javaScriptEnabled
originWhitelist={["*"]}
onLoadStart={handleLoadStart}
Expand Down
40 changes: 36 additions & 4 deletions src/ReaderScreen/utils/gutkaScript.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ let isScrolling;
let isManuallyScrolling = false;
let lastHighlightedElement = null;
let highlightTimeout = null;
let scrollbar = null;

const clearScrollTimeout=()=> {
if (autoScrollTimeout != null) {
Expand All @@ -21,9 +22,27 @@ const clearScrollTimeout=()=> {
autoScrollTimeout = null;
}

const scrollFunc=(e)=> {
const updateScrollbar = () => {
if (!scrollbar) return;
const maxScrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) - window.innerHeight;
if (maxScrollHeight <= 0) {
scrollbar.style.display = "none";
return;
}
scrollbar.style.display = "block";
const scrollPosition = Math.max(0, Math.min(1, (window.pageYOffset || 0) / maxScrollHeight));
const thumbHeight = Math.max(30, (window.innerHeight / maxScrollHeight) * window.innerHeight);
const thumbElement = scrollbar.children[0];
if (thumbElement) {
thumbElement.style.height = thumbHeight + "px";
thumbElement.style.top = (scrollPosition * (window.innerHeight - thumbHeight)) + "px";
}
}

const scrollFunc = (event) => {
curPosition = getScrollPercent();
window.ReactNativeWebView.postMessage("scroll-" + curPosition);
updateScrollbar();
if (window.scrollY == 0) {
window.ReactNativeWebView.postMessage("show");
}
Expand Down Expand Up @@ -101,20 +120,33 @@ window.addEventListener(
false
);

${listener}.onload = () => {
// Use window.onload for Android reliability
window.onload = () => {
if (${theme.mode === "dark"}) {
//fade event
fadeInEffect();
}

scrollToPosition();
scrollToPosition();

// Minimal scrollbar - works on Android and iOS
Copy link
Collaborator

@Gauravjeetsingh Gauravjeetsingh Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Collaborator Author

@amitojsingh amitojsingh Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is added as defensive logic to handle cases where the screen may load multiple times, preventing duplicate scrollbars from being created.

Copy link
Collaborator

@Gauravjeetsingh Gauravjeetsingh Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can't add a condition that if this div exists, do not add another? Why do we need to remove and add?

Copy link
Collaborator Author

@amitojsingh amitojsingh Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

const existingScrollbar = document.getElementById("sb");
if (existingScrollbar) existingScrollbar.remove();
scrollbar = document.createElement("div");
scrollbar.id = "sb";
const scrollbarThumb = document.createElement("div");
scrollbarThumb.id = "sb-t";
scrollbar.appendChild(scrollbarThumb);
document.body.appendChild(scrollbar);
setTimeout(updateScrollbar, 100);
window.addEventListener("resize", updateScrollbar);
Copy link
Collaborator

@Gauravjeetsingh Gauravjeetsingh Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

@amitojsingh amitojsingh Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

}


// Listen for scroll events
${listener}.addEventListener(
"scroll",
(event)=> {
(scrollEvent) => {
// Clear our timeout throughout the scroll
window.clearTimeout(isScrolling);
// Set a timeout to run after scrolling ends
Expand Down
18 changes: 18 additions & 0 deletions src/ReaderScreen/utils/gutkahtml.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,24 @@ const htmlTemplate = (backColor, fontFace, content, theme, savePosition) => `<!D
.right{
text-align:right
}
/* Minimal scrollbar */
#sb {
position: fixed;
right: 0;
top: 0;
width: 6px;
height: 100vh;
z-index: 99999;
pointer-events: none;
}
#sb-t {
position: absolute;
right: 1;
Copy link
Collaborator

@Gauravjeetsingh Gauravjeetsingh Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should either be 0, or 1px, right? Is there a reason for it being 1 without the unit?

Copy link
Collaborator Author

@amitojsingh amitojsingh Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed.

width: 2px;
background: ${theme.colors.primaryText};
border-radius: 4px;
min-height: 40px;
}
</style>
<script>${script(theme, savePosition)}</script>
</head>
Expand Down
Loading