Re-calculate padding when slots change

[getflourish]

When filtering, I noticed that the dimensions of the scroll container aren’t updated which leads to overshoot scrolling. I’m not sure if this is a general misbehavior or related to my specific case.

I’m working on fixing this, by adding the updated life cycle method to the component. If the number of slots changed, padding recalculations similar to the ones on updateZone might be necessary. In my case, I also want to force scrollTop = 0 when filtering to make sure that the results are in the viewport. I’m not done, but I’m curious to hear if you can confirm this issue.

Isolation of the issue:
https://codepen.io/getflourish/pen/xLxaWG

[getflourish]

Here’s my updated method that gets called when slots are changed, by e.g. filtering a v-for list. I’m still testing this, but so far it looks good in my case.

updated: function () {
          var delta = this.delta;
          var slots = this.$slots.default;

          var scroller = this.$refs["virtual-scroller"];

          if (slots) {

            // detect slot changes
            if (slots.length != this.total) {

              // force scroll top
              this.$refs.container.scrollTop = 0;

              // update total
              this.total = slots.length;
            }

            delta.viewHeight = this.size * this.remain;
            delta.total = slots.length;

            if (delta.total < delta.keeps) {
                delta.allPadding = this.size * Math.abs(delta.total - delta.keeps) - delta.viewHeight;
            } else {
                delta.allPadding = this.size * (delta.total - delta.keeps);
            }

            // update padding
            scroller.style["padding-top"] = delta.paddingTop + 'px';
            scroller.style["padding-bottom"] = delta.allPadding - delta.paddingTop + 'px';

          } else {

            // remove padding if there are not slots
            scroller.style["padding-top"] = 0;
            scroller.style["padding-bottom"] = 0
          }

        }

I bet this can be written more clearly or logically. I got there by trial and error. Was hoping updateZone would do the trick, but somehow I came up with a different formula to calculate the padding.

[tangbc]

This is a carelessness problem, I fixed it in v1.1.3.

It is occured by when items count less than keeps count then calculated a negative padding, for a padding value like -64px, so it doesn't work.

It's clearly to fix it, details see :
https://github.com/tangbc/vue-virtual-scroll-list/blob/master/index.js#L177

[getflourish]

I love how simple your implementation is. I knew this could be done better ;) 😎