绑定样式正在使整个页面跳转（滚动）

Question

在我的 SPA 前面，我有 580 个高度 div，其中包含 9 个较小的 div（大约 190px 高度）。父 div 有 overflow: hidden 所以我一次只能看到 3 个元素。每 5 秒我改变样式 - 我添加了否定的 margin-top，所以看起来它们向上滚动并且新的 3 来自向下。

<div class="most__popular"
     v-for="n, i in articles" :key="n.id"
     :style="{margin: sliderMargin[i]}">

-

data() {
    return {
        articles: [],
        errors: [],
        step: 0
    }
},
mounted() {
    setInterval(() => {
        this.step = (this.step + 1) % 3;
    }, 5000);
},
computed: {
    sliderMargin() {
        const thresholds = [0, 3, 6];

        return this.articles.map((_, i) =>
            `${(i > thresholds[this.step]) ? '10px' : '-190px'} 0 10px 0`
        );
    }
}

articles 只是硬编码的 JSON 数据，包含 9 条记录。

它工作正常，但是当我稍微滚动页面时，我只看到最后一个元素（这个 580 高度父 div 的底部），当它从第三步变为第一步时（从 7,8,9 子 div 到 1,2， 3）它向下滚动我的页面..

我不希望它影响整个页面，我该如何解决这个问题？

---

编辑

我添加repository demo，让它在你的机器上运行：

安装 GIT 和 NodeJS（如果你还没有，你可能无法帮助我）

• 克隆/下载它git clone https://dopeCode@bitbucket.org/dopeCode/scrolling-issue.git
• 在 bash/cmd cd path/where/you've/cloned 中选择这个项目
• 在 bash/cmd 中运行 npm install
• 在 bash/cmd 中运行 npm run dev
• 在浏览器中访问 localhost:8080

稍微滚动页面，这样你就只能看到显示的 3 的最后一个元素。

Answer 1

您正在滑动图片更改页边距，这不是一个好主意。边距并不总是按照开发人员的预期表现。最好使用相对定位来实现这种目的。

我更改了您的相对定位代码，它运行良好。对您的 scrollElements.vue 文件进行以下更改。

将 sliderTop 添加到您的计算部分。

        sliderTop() {
            const scrollStep = 3;
            const itemHeight = 194;

            return this.articles.map((_, i) =>
                `${(i < this.step*scrollStep) ? (-i*itemHeight) : (-this.step*scrollStep*itemHeight)}px`
            );
        }

使用 sliderTop 为 most__popular 元素的部分设置样式

             :style="{top: sliderTop[i]}">

修复以下 CSS：

.most__popular {
    margin: 10px 0;
    transition: 1s top; /*Only top transition is required*/
    position: relative; /*Added relative positioning*/
}
.most__popular__container {
    overflow: hidden;
    height: 572px; /*Fixed this height*/
}

Answer 2

问题可能出在您的 CSS 中。你没有CSS？我在你的帖子里找不到。

请尝试在您的容器上使用overflow:hidden。您也可以在操作前在您的网站中插入零高度 div，定位到您网站的底部并在操作后将其删除。它应该防止在操作过程中滚动页面。

顺便说一句。对滑块使用 CSS。可以在没有 JS 的情况下创建它们。使用过渡和动画。 您是否考虑过适合智能手机的网站 (RWD)？