1. Dashboard
  2. Forum
    1. Unerledigte Themen
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team-Mitglieder
    4. Trophäen
    5. Mitgliedersuche
  4. Tutorial Bereich
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Lexikon
  • Erweiterte Suche
  1. Informatik Forum
  2. Webmaster & Internet
  3. Entwicklung

Simplebar nur auf X-Achse aktiv, jedoch nicht auf Y-Achse

    • JavaScript
  • Syntafin
  • 5. Januar 2024 um 14:10
  • Unerledigt
  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.793
    Trophäen
    2
    Beiträge
    1.415
    • 5. Januar 2024 um 14:10
    • #1

    Neues Jahr, neue Sachen die zu fixen sind :MiqoteHappy:


    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:

    HTML
    <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.

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • PixelPatron
    20
    PixelPatron
    github.com/pixelpatron90
    Reaktionen
    164
    Punkte
    4.084
    Beiträge
    724
    Einträge
    3
    • 6. Januar 2024 um 09:33
    • #2

    Schade das ich dir dabei null helfen kann allerdings hast du mir Mal wieder geholfen, unbewusst. Suche sowas schon seit 2 Tagen und nun habe ich eine gute Mglichkeit gefunden dank dir :winking_face:

    pixelpatron-100000?style=for-the-badge&logo=X&logoColor=white&labelColor=000000&color=FF0000 pixel_patron-100000?style=for-the-badge&logo=Discord&logoColor=white&labelColor=000000&color=FF0000

    EVARIOO - DISCORD

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden

Tags

  • VueJS
  • simplebar

Benutzer online in diesem Thema

  • 1 Besucher

Rechtliches

Impressum

Datenschutzerklärung