mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-15 01:33:54 +00:00
scroll top fixies
This commit is contained in:
parent
e9744cbc79
commit
a5c74c4372
@ -208,7 +208,7 @@ export default defineComponent({
|
|||||||
function scrollToGraph(e: any) {
|
function scrollToGraph(e: any) {
|
||||||
document?.getElementById(`tabitem${e}`)?.scrollIntoView();
|
document?.getElementById(`tabitem${e}`)?.scrollIntoView();
|
||||||
}
|
}
|
||||||
|
|
||||||
function observeItems(kill = false) {
|
function observeItems(kill = false) {
|
||||||
const graphs = JSON.parse(JSON.stringify(dashboardStore.currentTabItems));
|
const graphs = JSON.parse(JSON.stringify(dashboardStore.currentTabItems));
|
||||||
const observer = new IntersectionObserver((entries) => {
|
const observer = new IntersectionObserver((entries) => {
|
||||||
@ -216,11 +216,13 @@ export default defineComponent({
|
|||||||
if (element.isIntersecting && element.intersectionRatio > 0) {
|
if (element.isIntersecting && element.intersectionRatio > 0) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
currentItem.value = element.target.id;
|
currentItem.value = element.target.id;
|
||||||
|
console.log('219-CurrentEl:',currentItem.value);
|
||||||
|
|
||||||
}, 200);
|
}, 200);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
firstItem.value = document?.getElementById(`tabitem${graphs[0].i}`)
|
firstItem.value = document?.getElementById(`tabitem${graphs[0].i}`);
|
||||||
document.querySelectorAll(".tabitem").forEach((element) => {
|
document.querySelectorAll(".tabitem").forEach((element) => {
|
||||||
observer.observe(element);
|
observer.observe(element);
|
||||||
});
|
});
|
||||||
@ -235,7 +237,7 @@ export default defineComponent({
|
|||||||
() => dashboardStore.currentTabItems,
|
() => dashboardStore.currentTabItems,
|
||||||
() => {
|
() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
observeItems();
|
observeItems();
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
@ -300,15 +302,16 @@ export default defineComponent({
|
|||||||
dashboardStore.setCurrentTabItems(
|
dashboardStore.setCurrentTabItems(
|
||||||
dashboardStore.layout[l].children[activeTabIndex.value].children
|
dashboardStore.layout[l].children[activeTabIndex.value].children
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
function scrollToFirstGraph(scrollUp: boolean) {
|
function scrollToFirstGraph(scrollUp: boolean) {
|
||||||
const graphs = JSON.parse(JSON.stringify(dashboardStore.currentTabItems));
|
const noNextEl =
|
||||||
const thereisNextEl = document?.getElementById(`${currentItem.value}`) !== null
|
document?.getElementById(`${currentItem.value}`)?.nextElementSibling === null;
|
||||||
if (scrollUp && !thereisNextEl) {
|
if (scrollUp && noNextEl) {
|
||||||
console.log(firstItem.value)
|
console.log(firstItem.value)
|
||||||
firstItem.value.scrollIntoView();
|
firstItem.value.scrollIntoView();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.addEventListener("click", handleClick, false);
|
document.body.addEventListener("click", handleClick, false);
|
||||||
watch(
|
watch(
|
||||||
() => dashboardStore.activedGridItem,
|
() => dashboardStore.activedGridItem,
|
||||||
@ -327,27 +330,26 @@ export default defineComponent({
|
|||||||
);
|
);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => {
|
tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => {
|
||||||
|
const prevScrollY = tabObserveContainer.value.scrollTop
|
||||||
if (refScrollTimeOut.value) {
|
if (refScrollTimeOut.value) {
|
||||||
clearTimeout(refScrollTimeOut.value)
|
clearTimeout(refScrollTimeOut.value);
|
||||||
}
|
}
|
||||||
// console.log("WindowScrollY Outside:", tabObserveContainer.value);
|
|
||||||
refScrollTimeOut.value = window.setTimeout(() => {
|
refScrollTimeOut.value = window.setTimeout(() => {
|
||||||
if (
|
// console.log('prevScroll',prevScrollY, 'currentID:', currentItem.value);
|
||||||
tabObserveContainer.value?.scrollTop > currentScrollY.value ||
|
if(tabObserveContainer.value?.scrollTop > currentScrollY.value ||
|
||||||
tabObserveContainer.value?.scrollTop === currentScrollY.value
|
tabObserveContainer.value?.scrollTop === currentScrollY.value)
|
||||||
) {
|
{
|
||||||
scrollToFirstGraph(true)
|
console.log(tabObserveContainer.value?.scrollTop, currentScrollY.value)
|
||||||
console.log("Scrolled Down!")
|
setTimeout(() =>{
|
||||||
}
|
scrollToFirstGraph(true)
|
||||||
currentScrollY.value = tabObserveContainer.value?.scrollTop
|
},200)
|
||||||
console.log("CurrentScrollY:", document?.getElementById(`${currentItem.value}`));
|
// console.log("scrolled Down:", document?.getElementById(`${currentItem.value}`)?.nextElementSibling, firstItem.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
currentScrollY.value = tabObserveContainer.value?.scrollTop
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
tabRef?.value["parentElement"]?.classList?.toggle("item");
|
tabRef?.value["parentElement"]?.classList?.toggle("item");
|
||||||
if (dashboardStore.fullView) {
|
|
||||||
// console.log("Tab Osbercve:", tabObserveContainer);
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
observeItems(true);
|
observeItems(true);
|
||||||
|
Loading…
Reference in New Issue
Block a user