npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dynamic-virtual-scroller

v3.0.45

Published

A virtual scroller for the web that can handle dynamic row and column sizes.

Downloads

146

Readme

Hi Github!

VirtualScroller requires jquery and lodash to be loaded beforehand. More documentation is coming soon...

History of this code

Naive approach (0.x)

First, we tried just using the native scrolling and adding/removing rows when needed. The scroller was also tightly coupled to the data at that point. This solution had a couple of drawbacks:

  • The scroller had too much responsibility and got pretty complex because it had to handle data and rendering
  • When implementing sticky rows, we noticed that they flicker if we move them via css (translate). Thats because native scrolling was faster than translate.
  • Virtual scrolling of columns was not possible in that implementation

Structure: container canvas

Using translate + native scrolling (1.x)

The next version of the scroller still used native scrolling but didn't render the items in the same container. Instead, we used a scrollContainer in the background that we could bind scroll events on and rendered to a second container that was on top of the other. So scrolling was still native but we moved the items using translate only (sticky and non-sticky). That way there was no more flickering. But unfortunately this solution did not play well with mobile because the events of the canvas-container and the scroll-container conflicted.

Structure: container scrollContainer scrollCanvas canvasContainer [stickyCanvasContainer] canvas

Using only translate (2.x)

Version 2 did not use native scrolling at all but instead recreates the behavior using the mousewheel event and then translating the content as if it was scrolled. That way we have total control over the scrolling process and only need one container.

Structure: container [stickyCanvasContainer] canvas

Mostly native again (3.x)

Version 3 uses native scrolling when possible in order to deliver the best scrolling performance on mobile. Only for sticky columns and rows, where native scrolling would lead to flickering, we use the translate-approach. You can also force the scoller to use translation for scrolling by setting useNativeScrollingWhenPossible to false.