[Vuejs]-How to set scrollTop properly when scrolling with keys in div to keep selected item at same position

by

1👍

✅

this is what happens:

In case of transforms, the offsetWidth and offsetHeight returns the element’s layout width and height, while getBoundingClientRect() returns the rendering width and height.

MDN: Determining the dimensions of elements

So, in this case clientHeight has the same result as offsetHeight. You neeed to use getBoundingClientRect().

setScrollPosition () {
        if(+this.keyIndex >= 6){
          this.$refs.testMainDiv.scrollTop = (+this.keyIndex - 6) * this.$refs.testItemDiv[+this.keyIndex].getBoundingClientRect().height;
        }
        else{
          this.$refs.testMainDiv.scrollTop = 0;
        }
      }

I tested it with the browser scaling and it works, you try it with your display scaling and let’s see.

👤Periplo

Leave a comment