fix(VDateInput): don't scroll the page when opening 'years' view

[Tzahile]

Description

fixes #22581
In a page with big height, when opening a VDateInput and clicking on the years selection, the main page would scroll down (apparently to the place where the current year, that is scrolled into view, is located).

I've removed the scrollIntoView behaviour and instead, added yearsRef for the years container, and calculate the scrollTop based on both yearsRef and yearRef.

Markup:

<template>
  <v-app>
    <v-container class="py-8" height="140vh">
      <v-card class="mx-auto" max-width="520" title="User info">
        <v-card-text>
          <v-form>
            <v-text-field
              v-model="form.firstName"
              autocomplete="given-name"
              label="First name"
            />

            <v-text-field
              v-model="form.lastName"
              autocomplete="family-name"
              label="Last name"
            />

            <v-text-field
              v-model="form.address"
              autocomplete="street-address"
              label="Address"
            />

            <v-date-input
              v-model="form.dateOfBirth"
              :picker-props="{ max: maxDate }"
              label="Date of birth"
              clearable
            />
          </v-form>
        </v-card-text>
      </v-card>
    </v-container>
  </v-app>
</template>

<script setup>
import { reactive } from "vue";

const maxDate = new Date();

const form = reactive({
  firstName: "",
  lastName: "",
  address: "",
  dateOfBirth: null,
});
</script>