On the mobile terminal, if the list under the tabs page does not have a fixed height, then when the finger slides, it will affect each other. For example, if you scroll a certain distance in the list of category a, then you switch to the list b, and you will find The list under category b also slides a certain distance.
Why do list scrolls affect each other?
Because they are not scrolling inside themselves, but the whole body is scrolling, whether you are in channel a or channel b, the body element is actually scrolling
Here is a little trick to share: how to quickly find which element produces the scroll?
//Paste the code below into the browser Console and press Enter, then scroll the interface, it will output the scrolling elements
function findScroller(element) {
element.onscroll = function() { console.log(element)}
Array.from(element.children).forEach(findScroller);
}
findScroller(document.body);
Solution: Set a separate scrolling area for each list
Add a class style to the outermost div of article-list.vue (article list component): article-list
<style scoped lang="less">
.article-list { // The percentage unit is relative to the parent element // height: 100%;// Viewport (layout viewport on mobile) units: vw and vh, not affected by parent elements
// 1vw = one hundredth of the viewport width
// 1vh = one hundredth of the viewport height
height: 79vh;
overflow-y: auto;
}
</style>