Skip to content

Mobile scrolling with page-mode doesn't render past "keeps" items #345

Open
@allynsweet

Description

@allynsweet

Describe

When using a mouse wheel to scroll on MacOS, the virtual scroll works as intended in page-mode. However, when testing on a physical iOS device and Chrome mobile simulators, the virtual list only renders the amount of items set by :keeps. For example, if :keeps is set to 20, the page will render 20 items despite the list being greater than 20, and then there will be a ton of whitespace beneath the rendered components.

To Reproduce

Steps to reproduce the behavior:

  1. Use page-mode, populate list items greater than the :keeps prop.
  2. My component looks like this:
<virtual-list
            ref="itemList"
            class="scroll-touch"
            data-key="id" :keeps="20"
            :page-mode="true"
            :estimate-size="355"
            :data-sources="items"
            :data-component="component"
          />

.scroll-touch was taken from the page mode example.
3. Run on a mobile phone or mobile simulator, and scroll past the number of items defined by :keeps.

Other

  • Version 2.3.2
  • iOS Chrome and Safari
  • MacOS Safari

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions