decrease reader's up and down arrows scrolling distance (#588)

* revert reader's up and down arrows behavior

* add variant to scrolling shortcuts

* remove comments for SCROLL_OFFSET & SCROLL_OFFSET_SLIGHT

* Apply suggestions from code review

see PR #588

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>

* fix linting

---------

Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
This commit is contained in:
Jean-Philippe ALLEGRO
2024-02-01 19:29:21 +01:00
committed by GitHub
parent 3077824ca7
commit 7fb1dae9c4

View File

@@ -25,6 +25,7 @@ const findCurrentPageIndex = (wrapper: HTMLDivElement): number => {
// TODO: make configurable? // TODO: make configurable?
const SCROLL_SAFE_ZONE = 5; // px const SCROLL_SAFE_ZONE = 5; // px
const SCROLL_OFFSET = 0.95; const SCROLL_OFFSET = 0.95;
const SCROLL_OFFSET_SLIGHT = 0.25;
const SCROLL_BEHAVIOR: ScrollBehavior = 'smooth'; const SCROLL_BEHAVIOR: ScrollBehavior = 'smooth';
const isAtBottom = () => { const isAtBottom = () => {
@@ -111,7 +112,7 @@ export function VerticalPager(props: IReaderProps) {
}, [selfRef]); }, [selfRef]);
const go = useCallback( const go = useCallback(
(direction: 'up' | 'down') => { (direction: 'up' | 'down', offset: number = SCROLL_OFFSET) => {
if (direction === 'down' && isAtBottom()) { if (direction === 'down' && isAtBottom()) {
nextChapter(); nextChapter();
return; return;
@@ -123,7 +124,7 @@ export function VerticalPager(props: IReaderProps) {
} }
window.scroll({ window.scroll({
top: window.scrollY + window.innerHeight * SCROLL_OFFSET * (direction === 'up' ? -1 : 1), top: window.scrollY + window.innerHeight * offset * (direction === 'up' ? -1 : 1),
behavior: SCROLL_BEHAVIOR, behavior: SCROLL_BEHAVIOR,
}); });
}, },
@@ -138,11 +139,17 @@ export function VerticalPager(props: IReaderProps) {
go(e.shiftKey ? 'up' : 'down'); go(e.shiftKey ? 'up' : 'down');
break; break;
case 'ArrowDown': case 'ArrowDown':
e.preventDefault();
go(e.shiftKey ? 'up' : 'down', SCROLL_OFFSET_SLIGHT);
break;
case 'ArrowRight': case 'ArrowRight':
e.preventDefault(); e.preventDefault();
go(e.shiftKey ? 'up' : 'down'); go(e.shiftKey ? 'up' : 'down');
break; break;
case 'ArrowUp': case 'ArrowUp':
e.preventDefault();
go(e.shiftKey ? 'down' : 'up', SCROLL_OFFSET_SLIGHT);
break;
case 'ArrowLeft': case 'ArrowLeft':
e.preventDefault(); e.preventDefault();
go(e.shiftKey ? 'down' : 'up'); go(e.shiftKey ? 'down' : 'up');