On my SPA frontend, I have a parent div with a height of 580 containing 9 smaller divs (about 190px in height each). The parent div has an overflow set to hidden so that only 3 elements are visible at one time. Every 5 seconds, I change the styles by adding a negative margin-top, creating a scrolling effect where new elements appear from the bottom as others move up.
<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`
);
}
}
The articles data is currently hardcoded JSON with 9 records.
While this setup works well, I noticed that when I scroll the page slightly to view only the last element of the 580px tall parent div and it transitions from the third step back to the first, my entire page scrolls down unexpectedly.
I want to prevent this behavior from affecting the rest of the content on the page. How can I fix this issue?
EDIT
I've included a repository demo for you to test locally:
To run the demo, please make sure you have GIT and NodeJS installed:
- Clone or download the repository using the command:
git clone https://<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="67030817022408030227050e130512040c021349081500">[email protected]</a>/dopeCode/scrolling-issue.git - Navigate to the downloaded project directory in your terminal using:
cd path/where/you've/cloned - Run
npm installin the terminal - Launch the demo by running:
npm run dev - Visit localhost:8080 in your browser
Scroll the page slightly to display only the last visible element of the 3 shown.