better way of doing that
Couldn't due before becuase of how css was done
This commit is contained in:
parent
9f360606a0
commit
4b56d34f93
|
@ -129,7 +129,6 @@ import {
|
||||||
nextTick,
|
nextTick,
|
||||||
reactive,
|
reactive,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import tinycolor from "tinycolor2";
|
|
||||||
import MkFollowButton from "@/components/MkFollowButton.vue";
|
import MkFollowButton from "@/components/MkFollowButton.vue";
|
||||||
import { popupMenu } from "@/os";
|
import { popupMenu } from "@/os";
|
||||||
import { scrollToTop } from "@/scripts/scroll";
|
import { scrollToTop } from "@/scripts/scroll";
|
||||||
|
@ -257,15 +256,11 @@ onMounted(() => {
|
||||||
tabEl.style = `--width: ${tabSizeX}px`;
|
tabEl.style = `--width: ${tabSizeX}px`;
|
||||||
}
|
}
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const parentRect = tabsEl.getBoundingClientRect();
|
|
||||||
const rect = tabEl.getBoundingClientRect();
|
|
||||||
const left =
|
|
||||||
rect.left - parentRect.left + tabsEl?.scrollLeft;
|
|
||||||
tabHighlightEl.style.width = tabSizeX + "px";
|
tabHighlightEl.style.width = tabSizeX + "px";
|
||||||
tabHighlightEl.style.transform = `translateX(${left}px)`;
|
tabHighlightEl.style.transform = `translateX(${tabEl.offsetLeft}px)`;
|
||||||
window.requestAnimationFrame(() => {
|
window.requestAnimationFrame(() => {
|
||||||
tabsEl?.scrollTo({
|
tabsEl?.scrollTo({
|
||||||
left: left - 60,
|
left: tabEl.offsetLeft - 60,
|
||||||
behavior: "smooth",
|
behavior: "smooth",
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue