How to hide browser scroll bar for specific page-CodePudding

How do I get browser scrollbar to be hidden on only one page, of many, on a website. The only way I can get the browser scrollbar to hide at all is with

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

However this hides the scrollbar for the entire site.

CodePudding user response：

On the page you want scrolling disabled:

<script setup>
import { onMount, onBeforeUnmount } from 'vue'

onMount() {
  document.body.className.add('no-scroll');
}
onBeforeUnmount() {
  document.body.className.remove('no-scroll')
}
</script>
<style>
body.no-scroll {
  overflow-y: hidden;
  height: 100vh;
}
</style>

Note your current scroll disabling method only works on webkit browsers. The one suggested in my answer works cross-browser.

If using Vue2:

<script>
export default {
  mounted() {
    document.body.className.add('no-scroll');
  },
  beforeUnmount() {
    document.body.className.remove('no-scroll');
  }
}
</script>

CSS remains the same. Note <style> tag can't be scoped. If you already have a <style scoped> in that component, add another <style> tag, with the above CSS and without scoped attribute.

CodePudding user response：

Add overflow: hidden; to hide both the horizontal and vertical scrollbar.

*body {
  overflow: hidden; /* Hide scrollbars */
}*