1234567891011121314151617181920212223242526272829303132333435 |
- import { ref, computed, nextTick } from "vue";
- export const useScroll = () => {
- const scrollRef = ref(null);
- const targeScrolltDom = computed(() => scrollRef.value.targetScrollDom);
- const scrollToBottom = async () => {
- await nextTick();
- if (scrollRef.value) {
- targeScrolltDom.value.scrollTo({
- top: targeScrolltDom.value.scrollHeight,
- left: 0,
- behavior: 'smooth'
- });
- }
- }
- const scrollToBottomIfAtBottom = async () => {
- await nextTick()
- if (scrollRef.value) {
- const threshold = 100;
- const distanceToBottom = targeScrolltDom.value.scrollHeight - targeScrolltDom.value.scrollTop - targeScrolltDom.value.clientHeight;
- if (distanceToBottom <= threshold) {
- targeScrolltDom.value.scrollTop = targeScrolltDom.value.scrollHeight;
- }
- }
- }
- return {
- scrollRef,
- scrollToBottom,
- scrollToBottomIfAtBottom
- }
- }
|