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只是包含9条记录的硬编码数据JSON。

它运行正常，但是当我滚动页面时，我只看到最后一个元素（这个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）？

绑定样式使整个页面跳跃（滚动）

2 个答案: