Как отодвинуть скролл на 20px вниз от верхнего края Vue.js

<template>
  <a @click="scroll20px">scroll20px</a>
  <div class="content" ref="content">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dicta dignissimos enim, fugiat maiores
      molestias totam voluptatem. Corporis eaque ex ipsam nihil, praesentium, quam reiciendis rem temporibus tenetur
      veritatis voluptatibus.
    </div>
    <div>Architecto beatae dicta dolorum, esse id illum maxime nisi officiis porro rerum. Aperiam assumenda deserunt
      doloribus ex obcaecati quas qui tempora? Amet, aspernatur cupiditate dolorem dolores error eum iure saepe?
    </div>
    <div>Ad amet aspernatur cupiditate ipsum nemo nihil totam voluptate? Consectetur corporis dolorem eius error, itaque
      laboriosam nam nobis optio, recusandae repellendus vel voluptate. A doloribus enim eos magnam quas quasi!
    </div>
    <div>Dignissimos, dolore eaque maiores nemo quae veniam voluptatem! Accusantium dignissimos est, magnam maiores
      minus nesciunt non, perferendis quaerat quasi quidem rem reprehenderit sequi voluptate voluptates voluptatibus!
      Cumque laborum numquam voluptas.
    </div>
    <div>A aliquid animi dicta dolorem enim error est et iste laborum magnam magni necessitatibus nesciunt odit omnis
      perspiciatis, quaerat quam quia quis, rem, repudiandae saepe sed sequi suscipit unde voluptatibus.
    </div>
    <div>Aliquid animi aspernatur deserunt earum eos facilis hic id, illum ipsa ipsum magnam obcaecati pariatur repellat
      sequi similique sit ullam. Distinctio labore qui voluptatum. Consequuntur dolore dolorum laboriosam porro quae?
    </div>
    <div>Aliquid cum illum ipsum quo rem saepe ullam voluptatem. Ab, adipisci amet consequatur dicta earum, hic
      laboriosam laborum nam, necessitatibus nesciunt non quam quidem quo repellat repudiandae sit ut vel!
    </div>
    <div>Architecto cupiditate, ea eaque earum impedit odit similique voluptate! Architecto consectetur consequatur
      dolorum enim eveniet exercitationem facere in ipsa, magnam maxime natus neque omnis placeat praesentium quos sed
      veritatis vitae?
    </div>
    <div>Accusamus accusantium aspernatur autem dignissimos distinctio doloremque facilis in inventore iure laudantium
      minima molestiae mollitia, nulla omnis optio perferendis quam qui, quibusdam sit tempora temporibus ut voluptate
      voluptates, voluptatibus voluptatum.
    </div>
    <div>A accusantium animi atque eaque eos error eveniet exercitationem fugit hic illum incidunt maiores non numquam
      officia omnis, pariatur perferendis perspiciatis qui quia quibusdam quod quos sed sequi sunt temporibus.
    </div>
  </div>
</template>

<script setup>

import {ref} from "vue";

const content = ref(null)
const scroll20px = () => {
  content.value.scrollTop = 20;
}
</script>

<style>
.content {
  max-height: 300px;
  width: 100px;
  overflow-y: scroll;
}
</style>