github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 09:48:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

scroll to top works

Browse Source
This commit is contained in:
Peter Olu 2022-04-24 18:43:02 +01:00
parent 43e7c2c4ff
commit 1cf0bfb474
1 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/dashboard/controls/Tab.vue
View File

@ -190,6 +190,9 @@ export default defineComponent({
const tabObserveContainer = ref<any>(null); const tabObserveContainer = ref<any>(null);
const currentItem = ref(""); const currentItem = ref("");
const lastItem = ref(""); const lastItem = ref("");
const refScrollTimeOut = ref();
const currentScrollY = ref(0);
const l = dashboardStore.layout.findIndex( const l = dashboardStore.layout.findIndex(
(d: LayoutConfig) => d.i === props.data.i (d: LayoutConfig) => d.i === props.data.i
); );
@ -314,6 +317,12 @@ export default defineComponent({
dashboardStore.layout[l].children[activeTabIndex.value].children dashboardStore.layout[l].children[activeTabIndex.value].children
); );
} }
function scrollToFirstGraph(scrollUp: boolean) {
const graphs = JSON.parse(JSON.stringify(dashboardStore.currentTabItems));
if (scrollUp) {
document?.getElementById(`tabitem${graphs[0].i}`)?.scrollIntoView();
}
}
document.body.addEventListener("click", handleClick, false); document.body.addEventListener("click", handleClick, false);
watch( watch(
() => dashboardStore.activedGridItem, () => dashboardStore.activedGridItem,
@ -332,9 +341,19 @@ export default defineComponent({
); );
onMounted(() => { onMounted(() => {
tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => { tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => {
// debounce(() => { if (refScrollTimeOut.value) {
// console.log("Yeah!"); clearTimeout(refScrollTimeOut.value)
// }, 100); }
// console.log("WindowScrollY Outside:", tabObserveContainer.value);
refScrollTimeOut.value = window.setTimeout(() => {
if (tabObserveContainer.value?.scrollTop === currentScrollY.value) {
scrollToFirstGraph(true)
console.log("Scrolled Down!")
}
currentScrollY.value = tabObserveContainer.value?.scrollTop
console.log("CurrentScrollY:", currentScrollY.value);
}, 100);
}); });
tabRef?.value["parentElement"]?.classList?.toggle("item"); tabRef?.value["parentElement"]?.classList?.toggle("item");
if (dashboardStore.fullView) { if (dashboardStore.fullView) {