menu

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.

Code

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

</template>



<style>

.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;
    }
</style>

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.

Code

<style>
    body::-webkit-scrollbar {
        display: none;
    }
</style>