Comments (7)
We do have a overhang property in Layout but we don't expose it. Yeah let's discuss about this in a separate issue
from virtual-scroller.
Ah, I guess use the base repeater and set the num (items to render) would be the thing to do, no scrolling would be required then to have everything in the page rendered.
from virtual-scroller.
I think there is an interesting discussion to be had here generally on how to ensure virtual scroller content, which is backed by in-memory objects instead of DOM data structures, indexable by search engines/accessibility technology/find-in-page.
This issue jumped straight to a solution, and I think we need more exploration of the problem and solution space, but we should definitely discuss. Probably we should open a separate issue. Thanks for getting the conversation started!
from virtual-scroller.
Thanks, I'll back up and explain more what my thinking was ...
This is for a PWA where I want to have infinite scrolling for normal users and use puppeteer to handle the SSR for SEO. I have it setup so the SSR'd request adds an extra ?headless
option that the page can use when rendering with puppeteer to make sure that the full page of data is rendered for the search bot (it can also avoid loading unnecessary packages such as firebase auth).
I just have a switch in the code to use the plain repeater with fixed number of items instead of the scroller if it's in headless rendering / SSR mode.
I guess it would be slightly more convenient to have some option on the scroller that could force it to render a set number of items, even if they weren't absolutely required for the viewport. e.g.
scroller.forceRenderNum = headless ? pageSize || 0
The data loading itself is a separate concern handled with redux-saga so for headless mode the number of items loaded will always be the page size. It's just that the items can be large enough that only a few may render based on the scrolling viewport size.
Hope that makes sense.
from virtual-scroller.
Another effective way to render all the items is to "force" the height of the <virtual-scroller>
to be big enough to render all the items, something like scroller.height = scroller.scrollHeight
invoked after the first render, or always set virtual-scroller { height: 10000vh; }
style
from virtual-scroller.
Thanks, I hadn't thought of that - I'll give it a try.
The other thing I was thinking about having the ability to force more items to be rendered is if there was some additional loading that happens per item. For instance, after rendering the HTML of an item I might convert links to YouTube videos into embedded players or do other content replacements (emoticon codes, markdown etc...).
Being able to have some 'margin' to how far out the rendering goes helps make sure they are loaded before they come into view. A bit like the margin in IntersectionObserver so you can chose when things start rendering before they come into the viewport.
That's probably a separate issue / use case though.
from virtual-scroller.
With the new approach (detailed in the updated README), this problem is pretty much solved, since all the items are in the DOM already, so closing this issue.
from virtual-scroller.
Related Issues (20)
- Link to demos HOT 1
- Need a polished demo. HOT 1
- Demos don't actually work in other browsers HOT 3
- Need API to commnicate expected sizes of content HOT 2
- Exploratory findings from sticky.html demo HOT 3
- sticky perf demo does not work on mobile
- Does it support recursive generation? HOT 3
- sticky.html demo, "divs" on ToT Chromium doesn't work properly HOT 1
- Move demos to another repository; leave this for the specification HOT 2
- Multicolumn virtual-scroller support HOT 4
- [traditional-virtualization] What about lists that could go on infinitely back? HOT 1
- [traditional-virtualization] How would a front-end framework leverage that key reordering functionality? HOT 1
- Approx. release date? HOT 5
- GET std:virtual-scroller net::ERR_UNKNOWN_URL_SCHEME dose HOT 1
- GET std:virtual-scroller net::ERR_UNKNOWN_URL_SCHEME. Dose the name of module have changed?/ HOT 2
- not working with LitElements HOT 3
- Unexpected data error HOT 1
- The Project is Stoped ?? HOT 1
- How to measure the performance of virtual scrolling in a production environment? HOT 1
- Why is it dead? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from virtual-scroller.