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:
committed by
GitHub
parent
3077824ca7
commit
7fb1dae9c4
@@ -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');
|
||||||
|
|||||||
Reference in New Issue
Block a user