mercs600 / vue2-perfect-scrollbar

Vue.js wrapper for perfect scrollbar
https://mercs600.github.io/vue2-perfect-scrollbar/
MIT License
275 stars 43 forks source link

can possible applied in body tag? #30

Closed ayophanz closed 4 years ago

ayophanz commented 4 years ago

I want body tag to be perfect scroll

mercs600 commented 4 years ago

@ayophanz Probably yes, but why do you want to to this ? This is not recommended option to mount application on body tag. Maybe better option will be create container which get height/width 100% of body ?

ayophanz commented 4 years ago

@Admin Panel iresnef@gmail.com My main scrollbar is on my body tag, I think this is important.

On Mon, Dec 23, 2019 at 11:22 PM Adam notifications@github.com wrote:

@ayophanz https://github.com/ayophanz Probably yes, but why do you want to to this ? This is not recommended options to mount application on body tag. Maybe better option will be create container which get height/width 100% of body ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mercs600/vue2-perfect-scrollbar/issues/30?email_source=notifications&email_token=AF3RLUAQ6XU25QZHSWI2XVTQ2DJUJA5CNFSM4J6T3QP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHRKVTQ#issuecomment-568502990, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF3RLUEGW4WZDYC3LI2A3JLQ2DJUJANCNFSM4J6T3QPQ .

mercs600 commented 4 years ago

@ayophanz It doesn't have to be on body. You can set overflow to hidden on body and html tag - then your first div wrapper will be responsible for scrolling. Have a look at this example: https://codesandbox.io/s/vue-perfect-scrollbar-component-local-registration-biuhn?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark

I have set

html,
body,
#app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

So first wrapper #app is equal to body height. I have set overflow: hidden also to disable native scroll. Then I setup <perfect-scrollbar/> as a wrapper component for application:

<template>
  <perfect-scrollbar id="app">
    <HelloWorld/>
    <HelloWorld/>
    <HelloWorld/>
    <HelloWorld/>
    <img width="25%" src="./assets/logo.png">
  </perfect-scrollbar>
</template>

It should works for you.