Merge pull request #536 from ueokande/make-smooth-scroll-smoother

Make smooth-scroll smoother
jh-changes
Shin'ya Ueoka 6 years ago committed by GitHub
commit 21788740c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      src/content/actions/operation.js
  2. 2
      src/content/components/common/keymapper.js
  3. 137
      src/content/scrolls.js
  4. 1
      src/shared/utils/keys.js

@ -10,7 +10,7 @@ import * as markActions from './mark';
import * as properties from 'shared/settings/properties';
// eslint-disable-next-line complexity, max-lines-per-function
const exec = (operation, repeat, settings, addonEnabled) => {
const exec = (operation, settings, addonEnabled) => {
let smoothscroll = settings.properties.smoothscroll ||
properties.defaults.smoothscroll;
switch (operation.type) {
@ -31,13 +31,13 @@ const exec = (operation, repeat, settings, addonEnabled) => {
}), '*');
break;
case operations.SCROLL_VERTICALLY:
scrolls.scrollVertically(operation.count, smoothscroll, repeat);
scrolls.scrollVertically(operation.count, smoothscroll);
break;
case operations.SCROLL_HORIZONALLY:
scrolls.scrollHorizonally(operation.count, smoothscroll, repeat);
scrolls.scrollHorizonally(operation.count, smoothscroll);
break;
case operations.SCROLL_PAGES:
scrolls.scrollPages(operation.count, smoothscroll, repeat);
scrolls.scrollPages(operation.count, smoothscroll);
break;
case operations.SCROLL_TOP:
scrolls.scrollToTop(smoothscroll);

@ -49,7 +49,7 @@ export default class KeymapperComponent {
}
let operation = keymaps.get(matched[0]);
let act = operationActions.exec(
operation, key.repeat, state.setting, state.addon.enabled
operation, state.setting, state.addon.enabled
);
this.store.dispatch(act);
this.store.dispatch(inputActions.clearKeys());

@ -1,11 +1,11 @@
import * as doms from 'shared/utils/dom';
const SCROLL_DELTA_X = 48;
const SCROLL_DELTA_Y = 48;
const SMOOTH_SCROLL_DURATION = 150;
const SCROLL_DELTA_X = 64;
const SCROLL_DELTA_Y = 64;
// dirty way to store scrolling state on globally
let scrolling = [false];
let scrolling = false;
let lastTimeoutId = null;
const isScrollableStyle = (element) => {
let { overflowX, overflowY } = window.getComputedStyle(element);
@ -51,65 +51,49 @@ const scrollTarget = () => {
return window.document.documentElement;
};
class SmoothScroller {
constructor(element, repeat) {
const resetScrolling = () => {
scrolling = false;
};
class Scroller {
constructor(element, smooth) {
this.element = element;
this.repeat = repeat;
this.scrolling = scrolling;
if (repeat) {
this.easing = SmoothScroller.linearEasing;
} else {
this.easing = SmoothScroller.inOutQuadEasing;
}
this.smooth = smooth;
}
scroll(x, y) {
if (this.scrolling[0]) {
scrollTo(x, y) {
let behavior = this.smooth ? 'smooth' : 'auto';
window.scrollTo({
left: x,
top: y,
behavior: behavior,
});
if (!this.smooth) {
return;
}
scrolling[0] = true;
this.startX = this.element.scrollLeft;
this.startY = this.element.scrollTop;
this.targetX = x;
this.targetY = y;
this.distanceX = x - this.startX;
this.distanceY = y - this.startY;
this.timeStart = 0;
window.requestAnimationFrame(this.loop.bind(this));
this.prepareReset();
}
loop(time) {
if (!this.timeStart) {
this.timeStart = time;
}
let elapsed = time - this.timeStart;
let v = this.easing(elapsed / SMOOTH_SCROLL_DURATION);
let nextX = this.startX + this.distanceX * v;
let nextY = this.startY + this.distanceY * v;
window.scrollTo(nextX, nextY);
if (elapsed < SMOOTH_SCROLL_DURATION) {
window.requestAnimationFrame(this.loop.bind(this));
} else {
scrolling[0] = false;
this.element.scrollTo(this.targetX, this.targetY);
scrollBy(x, y) {
let behavior = this.smooth ? 'smooth' : 'auto';
window.scrollBy({
left: x,
top: y,
behavior: behavior,
});
if (!this.smooth) {
return;
}
this.prepareReset();
}
static inOutQuadEasing(t) {
if (t < 1) {
return t * t;
prepareReset() {
scrolling = true;
if (lastTimeoutId) {
clearTimeout(lastTimeoutId);
lastTimeoutId = null;
}
return -(t - 1) * (t - 1) + 1;
}
static linearEasing(t) {
return t;
lastTimeoutId = setTimeout(resetScrolling, 100);
}
}
@ -123,77 +107,70 @@ class RoughtScroller {
}
}
const scroller = (element, smooth, repeat) => {
if (smooth) {
return new SmoothScroller(element, repeat);
}
return new RoughtScroller(element);
};
const getScroll = () => {
let target = scrollTarget();
return { x: target.scrollLeft, y: target.scrollTop };
};
const scrollVertically = (count, smooth, repeat) => {
const scrollVertically = (count, smooth) => {
let target = scrollTarget();
let x = target.scrollLeft;
let y = target.scrollTop + SCROLL_DELTA_Y * count;
if (repeat && smooth) {
y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
let delta = SCROLL_DELTA_Y * count;
if (scrolling) {
delta = SCROLL_DELTA_Y * count * 4;
}
scroller(target, smooth, repeat).scroll(x, y);
new Scroller(target, smooth).scrollBy(0, delta);
};
const scrollHorizonally = (count, smooth, repeat) => {
const scrollHorizonally = (count, smooth) => {
let target = scrollTarget();
let x = target.scrollLeft + SCROLL_DELTA_X * count;
let y = target.scrollTop;
if (repeat && smooth) {
y = target.scrollTop + SCROLL_DELTA_Y * count * 4;
let delta = SCROLL_DELTA_X * count;
if (scrolling) {
delta = SCROLL_DELTA_X * count * 4;
}
scroller(target, smooth, repeat).scroll(x, y);
new Scroller(target, smooth).scrollBy(delta, 0);
};
const scrollPages = (count, smooth, repeat) => {
const scrollPages = (count, smooth) => {
let target = scrollTarget();
let height = target.clientHeight;
let x = target.scrollLeft;
let y = target.scrollTop + height * count;
scroller(target, smooth, repeat).scroll(x, y);
let delta = height * count;
if (scrolling) {
delta = height * count;
}
new Scroller(target, smooth).scrollBy(0, delta);
};
const scrollTo = (x, y, smooth) => {
let target = scrollTarget();
scroller(target, smooth, false).scroll(x, y);
new Scroller(target, smooth).scrollTo(x, y);
};
const scrollToTop = (smooth) => {
let target = scrollTarget();
let x = target.scrollLeft;
let y = 0;
scroller(target, smooth, false).scroll(x, y);
new Scroller(target, smooth).scrollTo(x, y);
};
const scrollToBottom = (smooth) => {
let target = scrollTarget();
let x = target.scrollLeft;
let y = target.scrollHeight;
scroller(target, smooth, false).scroll(x, y);
new Scroller(target, smooth).scrollTo(x, y);
};
const scrollToHome = (smooth) => {
let target = scrollTarget();
let x = 0;
let y = target.scrollTop;
scroller(target, smooth, false).scroll(x, y);
new Scroller(target, smooth).scrollTo(x, y);
};
const scrollToEnd = (smooth) => {
let target = scrollTarget();
let x = target.scrollWidth;
let y = target.scrollTop;
scroller(target, smooth, false).scroll(x, y);
new Scroller(target, smooth).scrollTo(x, y);
};
export {

@ -18,7 +18,6 @@ const fromKeyboardEvent = (e) => {
return {
key: modifiedKeyName(e.key),
repeat: e.repeat,
shiftKey: shift,
ctrlKey: e.ctrlKey,
altKey: e.altKey,