vue-virtual-scroller icon indicating copy to clipboard operation
vue-virtual-scroller copied to clipboard

Published 20 hours ago • verified publisher icon Akryum

Only last 2 items are visible after using "page-mode", and also elements not rendering correctly.

Open bhargavr445 opened this issue 4 years ago • 7 comments

After adding page-mode attribute, rendering the data on view is not working as expected. Without using page mode everything is working correctly.`

` Screen Shot 2020-09-11 at 12 36 18 AM

bhargavr445 avatar Sep 11 '20 04:09 bhargavr445

without page mode, same question

JasonBai007 avatar Oct 16 '20 09:10 JasonBai007

Same here, when using page-mode, scrolling down doesn't render new elements (just empty space), yet the scrollbar is correctly sized.

Without page-mode, no issue. I guess it's a problem with the observer and specific layout we have in our projects.

Prechan avatar Jan 05 '21 13:01 Prechan

Could one of you make a sample project that replicates the issue so I can get a better look at the issue?

EricRabil avatar Jan 05 '21 13:01 EricRabil

hello, we are also experiencing this issue using page-mode. do we have an update on this one ?

m-val avatar Aug 16 '21 07:08 m-val

For me the issue was using overflow-y:visible;overflow-x:hidden; on an element in the dom above the virtual scroller. in computed the overflow-y:visible will be set as overflow-y:auto . The scrollparent package will then detect the element with the overflow-y:auto and not the actual body, html.

Instead use just overflow: visible.

image

Wrong:

<html>
	<body>
		<div class="main-wrapper" style="overflow-y:visible;overflow-x:hidden">
			<DynamicScroller></DynamicScroller>
		</div>
	</body>
</html>

Correct:

<html>
	<body>
		<div class="main-wrapper" style="overflow:visible;">
			<DynamicScroller></DynamicScroller>
		</div>
	</body>
</html>

but im still having weird spacing issues, at least the elements are rendering now.

Baconiser avatar Oct 26 '21 10:10 Baconiser

Have the same issue, I'm using Vue 3 and the current Beta of vue-virtual-scroller (2.0.0-beta.8)

https://github.com/Akryum/vue-virtual-scroller/assets/17964384/cf1e766b-4531-4560-aba1-065eebbbcc22

My Project on Github: https://github.com/felix-berlin/berliner-schnauze

Live URL: https://berliner-schnauze.wtf/

felix-berlin avatar Nov 19 '23 11:11 felix-berlin

Same issue. I'd like to page-mode look for the closest overflow-y: auto element and use it as its reference. I noticed that the position at which rendering is triggered seems affected by the presence of static content above the virtual scroller. In particular, if the static content is taller, the rendering will occur only after scrolling further.

cfviotti avatar Dec 14 '23 22:12 cfviotti