|
|
|
|
@ -39,6 +39,14 @@ const isAtRight = ref(false);
|
|
|
|
|
const isAtBottom = ref(false);
|
|
|
|
|
const isAtLeft = ref(true);
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* We have to check if the scroll amount is close enough to some threshold in order to
|
|
|
|
|
* more accurately calculate arrivedState. This is because scrollTop/scrollLeft are non-rounded
|
|
|
|
|
* numbers, while scrollHeight/scrollWidth and clientHeight/clientWidth are rounded.
|
|
|
|
|
* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
|
|
|
|
|
*/
|
|
|
|
|
const ARRIVED_STATE_THRESHOLD_PIXELS = 1;
|
|
|
|
|
|
|
|
|
|
const showShadowTop = computed(() => props.shadow && props.shadowTop);
|
|
|
|
|
const showShadowBottom = computed(() => props.shadow && props.shadowBottom);
|
|
|
|
|
const showShadowLeft = computed(() => props.shadow && props.shadowLeft);
|
|
|
|
|
@ -60,14 +68,18 @@ function handleScroll(event: Event) {
|
|
|
|
|
const target = event.target as HTMLElement;
|
|
|
|
|
const scrollTop = target?.scrollTop ?? 0;
|
|
|
|
|
const scrollLeft = target?.scrollLeft ?? 0;
|
|
|
|
|
const offsetHeight = target?.offsetHeight ?? 0;
|
|
|
|
|
const offsetWidth = target?.offsetWidth ?? 0;
|
|
|
|
|
const clientHeight = target?.clientHeight ?? 0;
|
|
|
|
|
const clientWidth = target?.clientWidth ?? 0;
|
|
|
|
|
const scrollHeight = target?.scrollHeight ?? 0;
|
|
|
|
|
const scrollWidth = target?.scrollWidth ?? 0;
|
|
|
|
|
isAtTop.value = scrollTop <= 0;
|
|
|
|
|
isAtLeft.value = scrollLeft <= 0;
|
|
|
|
|
isAtBottom.value = scrollTop + offsetHeight >= scrollHeight;
|
|
|
|
|
isAtRight.value = scrollLeft + offsetWidth >= scrollWidth;
|
|
|
|
|
isAtBottom.value =
|
|
|
|
|
Math.abs(scrollTop) + clientHeight >=
|
|
|
|
|
scrollHeight - ARRIVED_STATE_THRESHOLD_PIXELS;
|
|
|
|
|
isAtRight.value =
|
|
|
|
|
Math.abs(scrollLeft) + clientWidth >=
|
|
|
|
|
scrollWidth - ARRIVED_STATE_THRESHOLD_PIXELS;
|
|
|
|
|
|
|
|
|
|
emit('scrollAt', {
|
|
|
|
|
bottom: isAtBottom.value,
|
|
|
|
|
|