OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Why scroll behavior different between IOS and Android in html5

  • Thread starter Thread starter Raymonda
  • Start date Start date
R

Raymonda

Guest
Code:
// arr1 is a long Array.
const arr1 = ref<any[]>([])
for (let i = 0; i < 100; i++) {
    arr1.value.push({
        name: i,
        key: `key-${i}`,
    })
}

const arr2 = computed(() => {
    return arr1.value.slice(start.value, start.value + 10)
})

now, render arr2 by v-for:

Code:
<view v-for="item in arr2" :key="item.key" class="item">
    {{ item }}
</view>

Case 1 :

1、Scroll the list,and make arr2[0] partially hiddenimg1

2、Click the test button

Android device : arr2[1] is now at top of the page.

Android

IOS devicce : arr2[1] scrolled to arr2[0].

enter image description here

Case 2: 1、Scroll the list, and make a lot of items hidden: enter image description here

2、Click the test button

Android device :

The page has no change:

enter image description here

IOS devicce :

enter image description here

Question: What went wrong? And how to make their behavior consistent?

Here is the test project: scroll-vue.zip

<pre><code>// arr1 is a long Array.
const arr1 = ref<any[]>([])
for (let i = 0; i < 100; i++) {
arr1.value.push({
name: i,
key: `key-${i}`,
})
}

const arr2 = computed(() => {
return arr1.value.slice(start.value, start.value + 10)
})
</code></pre>
<p>now, render <code>arr2</code> by <code>v-for</code>:</p>
<pre class="lang-js prettyprint-override"><code><view v-for="item in arr2" :key="item.key" class="item">
{{ item }}
</view>
</code></pre>
<p><strong>Case 1 :</strong></p>
<p>1、Scroll the list,and make <code>arr2[0] partially hidden</code> :
<a href="https://i.sstatic.net/tXIGtxyf.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/tXIGtxyf.png" alt="img1" /></a></p>
<p>2、Click the test button</p>
<p><strong>Android device :</strong>
<code>arr2[1]</code> is now at top of the page.</p>
<p><a href="https://i.sstatic.net/XGygpicg.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/XGygpicg.png" alt="Android" /></a></p>
<p><strong>IOS devicce :</strong>
<code>arr2[1]</code> scrolled to <code>arr2[0]</code>.</p>
<p><a href="https://i.sstatic.net/9nNSul6K.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/9nNSul6K.png" alt="enter image description here" /></a></p>
<p><strong>Case 2:</strong>
1、Scroll the list, and make a lot of items hidden:
<a href="https://i.sstatic.net/e91CE9vI.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/e91CE9vI.png" alt="enter image description here" /></a></p>
<p>2、Click the test button</p>
<p><strong>Android device :</strong></p>
<p>The page has no change:</p>
<p><a href="https://i.sstatic.net/e91CE9vI.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/e91CE9vI.png" alt="enter image description here" /></a></p>
<p><strong>IOS devicce :</strong></p>
<p><a href="https://i.sstatic.net/8pSKvwTK.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/8pSKvwTK.png" alt="enter image description here" /></a></p>
<p><strong>Question:</strong>
What went wrong? And how to make their behavior consistent?</p>
<p>Here is the test project:
<a href="https://github.com/user-attachments/files/15923626/scroll-vue.zip" rel="nofollow noreferrer">scroll-vue.zip</a></p>
 

Latest posts

Top