Neues Jahr, neue Sachen die zu fixen sind ![]()
Aktuell hänge ich etwas damit die Lösung zu finden weshalb Simplebar nicht funktioniert.
Nun durch Zufall gestern gesehen... es läuft ja doch, auf der X-Achse.
Mein Problem ist ja nun aber, das das warum auch immer auf der X-Achse läuft, auf der Y-Achse wie man es sich wünsche würde aber nicht, da wird die Browser Default Scrollleiste angezeigt.
Ja klar könnte man die zumindest bei Blink/Webkit Browsern anpassen, aber ich will ja alle abdecken und auch die Vorteile von Simplebar behalten.
Hier mal zwei Bilder die einmal zeigen wie Simplebar auf der X-Achse aktiv ist (gefunden durch Versuch das Blog Layout zu fixen) und das auf der Y-Achse es fehlt:
Eingebunden habe ich das eigentlich genau wie die Docs es dazu sagen, wie man hier im Layout auch sehen kann:
<script setup>
import Simplebar from "simplebar-vue";
import 'simplebar-vue/dist/simplebar.min.css';
import {defineComponent, onBeforeUnmount, onMounted, ref} from "vue";
defineComponent({
components: {
Simplebar
}
});
</script>
<template>
<div class="min-h-screen h-full">
<Disclosure as="nav" :class="{ 'bg-opacity-25 backdrop-blur': !isScrolled, 'bg-opacity-100': isScrolled, 'bg-purple-700 shadow-xl fixed w-full z-20 transition-all duration-1000 ease-in-out': true }" v-slot="{ open }">
<!-- Navigationsleiste -->
</Disclosure>
<Notification v-if="$page.props.flash.message" :title="$t('notification.title')" :data="$page.props.flash.message" />
<Transition name="page" mode="out-in">
<div v-if="animate" class="pt-14">
<Simplebar>
<slot />
</Simplebar>
</div>
</Transition>
<slot name="footer" />
<div :class="{ 'opacity-0': !isScrolled, 'bg-fuchsia-800 opacity-50 hover:opacity-100 rounded shadow-4xl shadow-pink-900 bottom-2 md:bottom-24 right-2 md:right-24 size-10 md:size-14 items-center justify-center flex': isScrolled, 'fixed transform transition-all duration-500 ease-in-out': true }">
<button @click="scrollToTop">
<ArrowUpIcon class="size-6 md:size-10"/>
</button>
</div>
</div>
</template>
Alles anzeigen
(Ich hab es hier nur gekürzt rein, die uninteressanten Sachen fehlen)
Eventuell zu erwähnen: Ja es ist VueJS und ich habe simplebar-vue in Verwendung hatte das Problem schon jemand und weiß vlt. Abhilfe?
Google half bisher nicht wirklich weiter, weil es eher nur veralteter kram ist dort.