html - 在 VueJS 中使用 CSS 位置粘性

Question

我在这个问题上花了很多时间我无法弄清楚为什么我的 CSS position: sticky 在我的模板中不起作用。

我的大部分应用程序都是使用 vuetify 构建的。我不知道这是否会干扰 CSS 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>

知道这不起作用吗？

Answer 1

我遇到过这样的问题。其中一个父元素有一个属性 overflow:hidden。

css-tricks.com/dealing-with-overflow-and-position-sticky/