Использование CSS position sticky в VueJS

Использование CSS position sticky в VueJS

11.01.2020 01:55:15 Просмотров 17 Источник

Я потратил много времени на эту проблему, я не могу понять, почему моя position: stickyне работает внутри моего шаблона.

Большая часть моего приложения построена с использованием vuetify. Я не знаю, мешает ли это position: sticky, но даже когда компонент достигает позиции, я никогда не прилипает.

<template>
    <v-sheet>
        <v-row>
            <v-col cols="2">
                <div class="side-panel">
                    <list_component class="side-panel-list"/>
                </div>
            </v-col>
            <v-col cols="10" class="pt-0 pb-0">
                <recipe_create_component/>
            </v-col>
        </v-row>
    </v-sheet>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        name: "production_tool_dashboard",
        extends: abstract,
        computed: {
            ...mapState({
                ...
            })
        },
        components: {
            ...
        },
        data() {
           ...
        }
    }
</script>

<style scoped>
    .side-panel-list {
        height: 100%;
    }
    .side-panel {
        top: 0;
        position: sticky;
        position: -webkit-sticky;
        z-index: 1;
        min-width: 240px;
        max-width: 240px;
        padding: 16px;
        border-right: solid 0.5px rgba(0,0,0,0.2);
    }
</style>

Есть идеи, что это не работает?

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59690009/using-css-position-sticky-in-vuejs#comment105536778_59690009
Ваш css использует position: relative?
https://stackoverflow.com/questions/59690009/using-css-position-sticky-in-vuejs#comment105539090_59690009
У вас должна быть позиция: sticky в вашем CSS. Нажмите Ctrl + R, чтобы перезагрузить браузер. Вероятно, проблема с кэшированием.
https://stackoverflow.com/questions/59690009/using-css-position-sticky-in-vuejs#comment105570980_59690009
Я сделал жесткое обновление, перезапустил сервер... ничего нового
https://stackoverflow.com/questions/59690009/using-css-position-sticky-in-vuejs#comment106401003_59690009
Работает на меня: codepen.io/buszmen/pen/YzXXxpw
https://stackoverflow.com/questions/59690009/using-css-position-sticky-in-vuejs#comment106418763_59690009
Пожалуйста, поделитесь рабочей демонстрацией или создайте StackBlitz. Спасибо
https://stackoverflow.com/questions/59690009/using-css-position-sticky-in-vuejs#comment106469463_59690009
Вы проверили полученный сгенерированный код?
https://stackoverflow.com/questions/59690009/using-css-position-sticky-in-vuejs#comment106587850_59690009
@Philx94 это может показаться глупым вопросом, но какой браузер вы используете? липкий не везде доступен: caniuse.com/#feat=css-sticky

Ответы - Использование CSS position sticky в VueJS / Using CSS position sticky in VueJS

rodurico

11.02.2020 06:15:15

Я сделал это, изменив высоту списка боковой панели с % на vh и установив размеры их родительских контейнеров. Что-то вроде этого:

  <template>
    <v-sheet>
      <!-- this guy needs height. Note that vh and px works, % doesn't -->
      <v-row style="height: 50vh;">

        <!-- this guy also needs height -->
        <v-col style="height: 150vh;" >
          <div class="side-panel">
            <!-- this height does not work with % -->
            <list_component class="side-panel-list" style="height: 30vh">
          </div>
        </v-col>

        ...
      </v-row>
    </v-sheet>
  </template>

Есть такая хорошая статья о липком позиционировании, которую я бы тоже рекомендовал.

https://stackoverflow.com/questions/59690009/using-css-position-sticky-in-vuejs/60172060#comment106584346_60172060
Особенно обратите внимание на связанную статью, что только дочерние липкие элементы не прилипают.
gao.xiangyang

12.02.2020 09:12:05

Это CSS scoping? Попробуйте следующий код

<style scoped>
    .side-panel /deep/ .side-panel-list {
        height: 100%;
    }
    .side-panel {
        top: 0;
        position: sticky;
        position: -webkit-sticky;
        z-index: 1;
        min-width: 240px;
        max-width: 240px;
        padding: 16px;
        border-right: solid 0.5px rgba(0,0,0,0.2);
    }
</style>

Gowtham Koushik

13.02.2020 12:15:34

Пожалуйста, проследите, чтобы любой из родительских элементов класса, боковой панели-списка не имел позиции относительно. Это не сработает, если у кого-то из родителей есть позиция родственника.

Закрыть X