Questions & Answers

How to hide scrollbars but leave one for description in Nuxt2?

The Problem

I want to hide scrollbar from all pages( which works), but only display one for a section of description.

What I've tried

I add .scroller in , try to display only for the of description. It didn't work.


    <v-col md="6" sm="12" class="scroller ">
          <v-row class="mx-auto" v-if="description.length > 0">
                        /* some description */



.scroller {
        display: inline-block;
        overflow-y: scroll;
        scrollbar-color: rebeccapurple green;

    ::-webkit-scrollbar {
        width: 0.8rem;

    ::-webkit-scrollbar-track {
        background: #f1f1f1;

    ::-webkit-scrollbar-thumb {
        background: #888;

    ::-webkit-scrollbar-thumb:hover {
        background: #555;

Expectation Hide all scrollbars, but leave one for the section of description in specific page.

Answers(1) :

One solution just comes out after posting the question: Just add following to .

So I still keep the section(v-col) which needs a scrollbar.


    body::-webkit-scrollbar {
        display: none;