mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 13:54:35 +03:00
fccfcc3320
refs https://github.com/TryGhost/Team/issues/1225 - added `scroll-into-view` modifier that will scroll an element into view putting it at the top or bottom of the viewport depending on which direction scroll is required - used the `scroll-into-view` modifier to scroll the highlighted gif into view
22 lines
819 B
JavaScript
22 lines
819 B
JavaScript
import getScrollParent from 'ghost-admin/utils/get-scroll-parent';
|
|
import {modifier} from 'ember-modifier';
|
|
|
|
export default modifier((element, [shouldScroll = true], {offset = 0}) => {
|
|
if (shouldScroll) {
|
|
const scrollParent = getScrollParent(element);
|
|
|
|
const isOffTop = element.offsetTop < scrollParent.scrollTop;
|
|
const isOffBottom = scrollParent.scrollTop + scrollParent.offsetHeight < element.offsetTop + element.offsetHeight;
|
|
|
|
if (isOffTop) {
|
|
const top = element.offsetTop - offset;
|
|
scrollParent.scrollTo({top, behavior: 'smooth'});
|
|
}
|
|
|
|
if (isOffBottom) {
|
|
const top = element.offsetTop - scrollParent.offsetHeight + element.offsetHeight + offset;
|
|
scrollParent.scrollTo({top, behavior: 'smooth'});
|
|
}
|
|
}
|
|
});
|