在 VueJS 中使用 CSS 位置粘性答案

【问题标题】：Using CSS position sticky in VueJS在 VueJS 中使用 CSS 位置粘性
【发布时间】：2020-01-10 22:55:15
【问题描述】：

我在这个问题上花了很多时间，我不明白为什么我的 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>

知道这不起作用吗？

【问题讨论】：

你试过用position: -webkit-sticky;
你的 css 正在使用 position: relative?
你的 CSS 中应该有 position: sticky。按 Ctrl + R 硬重新加载浏览器。可能是缓存问题。
我已经进行了一次硬刷新，重新启动了服务器......没什么新的
为我工作：codepen.io/buszmen/pen/YzXXxpw

标签： html css vue.js

【解决方案1】：

我遇到了这样的问题。其中一个父元素具有属性溢出：隐藏。

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

【讨论】：

对我来说就是这样。

【解决方案2】：

我成功地将侧面板列表的高度从 % 更改为 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>

有this nice article关于粘性定位，我也会推荐。

【讨论】：

特别注意链接文章中的独生子粘性元素不粘。

【解决方案3】：

请注意该类的任何父级，侧面板列表不得具有相对位置。如果任何父级具有相对位置，它将不起作用。

【讨论】：

【解决方案4】：

是 CSS 范围吗？试试下面的代码

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

【讨论】：

【解决方案5】：

为了让sticky起作用，元素必须有兄弟姐妹，这样它才能相对于它们保持固定。在您的代码中，您已将类放在没有兄弟姐妹的孩子身上。尝试将类放在您的 v-col 上，因为该元素有兄弟姐妹。

<v-row>
    <v-col cols="2" class="side-panel">  <!-- <<< class goes here!! -->
        <div>                            <!-- <<< not here -->
            <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>

【讨论】：

【解决方案6】：

所以对我来说，@Александр Жилин 的提示是完美的。最后，我使我的粘性元素与它一起工作

.parent-element{
  position: absolute;
  overflow: visible;
  height: 100%;
}

.sticky-child{
  position: sticky;
  top: 0
}

显然，父元素具有 overflow: visible 以及 height 属性集非常重要

【讨论】：