The Issue
My goal is to remove scrollbars from all pages (which I achieved successfully), but keep one visible for a specific section of description.
What I Attempted
I tried adding the class .scroller and only displaying it for the <div> containing the description. However, my solution did not work as expected.
Code Snippet
<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>
Desired Outcome I aim to hide all scrollbars except for the one present in the section describing a particular page.