100ZONE
/
SmartCommunity


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue-gemini-scrollbar - sidebar + content example</title>
  <style>
    /* global presentation */

    @font-face {
      font-family: 'BLOKKRegular';
      src: url('./assets/fonts/blokk/BLOKKRegular.eot');
      src: url('./assets/fonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
      url('./assets/fonts/blokk/BLOKKRegular.woff') format('woff'),
      url('./assets/fonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
      font-weight: normal;
      font-style: normal;
    }

     :root {
      font-size: 12px;
      line-height: 1.25rem;
      font-family: 'BLOKKRegular';
      color: #444;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html,
    body {
      overflow: hidden;
    }

    body {
      margin: 0;
      padding: 0;
    }

    img {
      max-width: 100%;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .fake-image {
      position: relative;
      padding-top: 9em;
      margin-bottom: 1rem;
      background-color: rgba(0, 0, 0, .05);
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
      border-radius: 3px;
    }

    .fake-image::after {
      content: '.';
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      color: #ccc;
    }
    /* sidebar */

    aside {
      position: absolute;
      top: 0;
      left: 0;
      width: 16rem;
      height: 100vh;
      box-shadow: 0 0 2rem rgba(0, 0, 0, .3);
    }

    aside header {
      height: 4rem;
      background-color: #CA9EFF;
    }

    .logo {
      padding: 1.2rem 2rem 0;
    }
    /* sidebar scrollbar wrapper */

    .sidebar-scrollbar {
      position: relative;
      height: calc(100vh - 4rem);
      overflow: auto;
    }

    .sidebar-content {
      padding: 1.5rem 1.5rem .5rem;
    }
    /* main content */

    .main {
      margin-left: 16rem;
      height: 100vh;
    }
    /* main scrollbar wrapper */

    .main-scrollbar {
      height: 100%;
      overflow: auto;
    }

    .main .hero {
      padding: 14rem 4rem;
      background-image: linear-gradient(-90deg, #CA9EFF, #9EFFF4);
    }

    .main .content {
      padding: 4rem;
    }

    .main .fake-image {
      padding-top: 24em;
    }

    .description-text {
      margin-bottom: 2em;
    }
    /* gemini-scrollbar override styles */

    .gm-scrollbar {
      border-radius: 4px;
    }

    .gm-scrollbar.-vertical {
      width: 8px;
    }

    .gm-scrollbar .thumb {
      background-color: rgba(111, 87, 140, .4);
    }

    .gm-scrollbar .thumb:hover,
    .gm-scrollbar .thumb:active {
      background-color: rgba(111, 87, 140, .6);
    }

  </style>
</head>

<body>
  <div id="app">
    <div class="main">
      <gemini-scrollbar class="main-scrollbar" @resize="mainScrollbarResize">
        <div class="hero">
          <h1>Lorem ipsum dolor sit amet</h1>
        </div>
        <div class="content">
          <p class="description-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore reprehenderit harum corrupti. Quibusdam nulla,
            dicta cupiditate reprehenderit, ullam in beatae, qui aperiam natus repellat dolor omnis ea amet modi autem.</p>
          <div class="col">
            <div class="row">
              <div class="fake-image"></div>
            </div>
            <div class="row">
              <div class="fake-image"></div>
            </div>
            <div class="row">
              <div class="fake-image"></div>
            </div>
          </div>
        </div>
      </gemini-scrollbar>
    </div>

    <aside>
      <header>
        <div class="logo">
          <h1>Hi</h1>
        </div>
      </header>
      <gemini-scrollbar class="sidebar-scrollbar" @resize="sidebarResize">
        <div class="sidebar-content">
          <ul>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
            <li class="fake-image"></li>
          </ul>
        </div>
      </gemini-scrollbar>
    </aside>
  </div>
  <script src="../js/vue.js" type="text/javascript"></script>
  <script src="../js/vue-gemini-scrollbar.js" type="text/javascript"></script>
  <script>
    new Vue({
      el: '#app',
      methods: {
        sidebarResize: function () {
          console.log('sidebarResize')
        },
        mainScrollbarResize:function(){
          console.log('mainScrollbarResize')
        }
      }
    })

  </script>
</body>

</html>