DominikSerafin / vuebar

(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com
https://github.serafin.io/vuebar/
MIT License
649 stars 77 forks source link

jsfiddle demo request #44

Closed diomed closed 6 years ago

diomed commented 6 years ago

Hello

I'd really like to integrate vuebar into my page, but I'm having real trouble figuring out how to do it.

So, I'd like to ask for a small demo, if you don't mind -demo that would basically do what you did here: https://github.serafin.io/vuebar/ on full page, and replace whole official/usual right scrollbar with vuebar. Of that I need demo if possible.

Thank you.

p.s. how come there are no official releases on github?

DominikSerafin commented 6 years ago

Hi @diomed

You can check source code of https://github.serafin.io/vuebar/

It's a little messy there to be honest, but to add Vuebar to whole page you need to set body overflow to hidden and wrap all content in another element.

Snippets taken from https://github.serafin.io/vuebar/:


body {
  margin: 0;
  overflow: hidden;
  padding: 0;
  background-color: #3079f4;
  -webkit-overflow-scrolling: touch;
}

...

// element that app is rendered in
#app {
  display: block;
  margin: 0 auto;
}

...

// el wrapping all the content
.el1full {
  display: block;
  width: auto;
  height: 100vh;
}  
 

<body>

  <div id="app" >

    <div class="el1full" v-bar>
      <div class="el2full" >

        ... page content

       </div>
     </div>

   </div> 

</body>