Skip to content
This repository has been archived by the owner on Jan 26, 2024. It is now read-only.

Commit

Permalink
Finally fixed the scrolling issue.
Browse files Browse the repository at this point in the history
  • Loading branch information
dj1ch committed Nov 15, 2023
1 parent 7686e7f commit 794682c
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 24 deletions.
41 changes: 22 additions & 19 deletions components/FAQEntry.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup>
import slugify from "@sindresorhus/slugify";
import { ref, onMounted, nextTick } from "vue";
import { ref, onMounted } from "vue";
const { question, link } = defineProps({
question: {
Expand All @@ -17,28 +17,23 @@ const myHash = link ?? slugify(question);
const isOpen = ref(false);
const entryRef = ref();
function scrollToEntry(animate = true) {
function scrollToEntry() {
const element = entryRef.value;
if (animate) {
element.scrollIntoView({
//behavior: "smooth",
block: "center",
inline: "center"
});
} else {
element.scrollIntoView();
}
element.scrollIntoView({
behavior: "smooth",
block: "center"
});
}
async function checkIsActive() {
function checkIsActive() {
const hash = window.location.hash;
const isActive = hash.substring(1) === myHash;
if (isActive) {
scrollToEntry(true);
// Wait for the next DOM update before opening the FAQ box
await nextTick();
scrollToEntry();
isOpen.value = true;
}
}
Expand All @@ -47,6 +42,11 @@ function onClick(ev) {
ev.preventDefault();
ev.stopPropagation();
if (!isOpen.value) {
// Scroll only when opening an FAQ entry
scrollToEntry();
}
isOpen.value = !isOpen.value;
if (isOpen.value) {
Expand All @@ -57,10 +57,9 @@ function onClick(ev) {
}
}
onMounted(() => {
if (window.location.hash && window.history.state) {
checkIsActive();
}
checkIsActive();
});
</script>
Expand All @@ -80,6 +79,10 @@ onMounted(() => {
<style>
html {
scroll-behavior: smooth;
}
a.faq-question {
color: inherit;
text-decoration: none;
Expand All @@ -93,7 +96,7 @@ a.faq-question {
border: 1px solid var(--vp-custom-block-details-border);
border-radius: 8px;
scroll-margin-top: -100px;
/* scroll-margin-top: -100px; */
}
.faq-entry summary {
Expand Down
5 changes: 0 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1377,8 +1377,3 @@ yallist@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

yarn@^1.22.19:
version "1.22.19"
resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.19.tgz#4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
integrity sha512-/0V5q0WbslqnwP91tirOvldvYISzaqhClxzyUKXYxs07yUILIs5jx/k6CFe8bvKSkds5w+eiOqta39Wk3WxdcQ==

0 comments on commit 794682c

Please sign in to comment.