100ZONE
/
SmartCommunity


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

<head>
  <meta charset="UTF-8">
  <title>vue-gemini-scrollbar - random-tests</title>
  <style>
    .hide {
      display: none
    }

    .example-content {
      padding: 1em;
      border: 0px solid red;
    }

    .inline {
      display: inline-block;
      vertical-align: top;
      border: 1px solid;
      overflow: auto;
    }

    html,
    body,#app {
      font-family: 'Avenir';
      font-size: 12px;
      height: 100%;
      margin: 0;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 0;
    }
    /** ---------- 0 ---------- **/

    #example-0 {
      width: 170px;
      height: 150px;
    }

    #example-0:before {
      content: 'div with no content';
      color: grey;
    }
    /** ---------- 1 ---------- **/

    #example-1 {
      width: 170px;
      height: 150px;
    }

    #example-1 .gm-scroll-view {}
    /** ---------- 2 ---------- **/

    #example-2 {
      width: 370px;
      height: 200px;
    }
    /** ---------- 3 ---------- **/

    #example-3 {
      width: 170px;
      height: 200px;
    }

    #example-3 img {
      max-width: 100%;
      display: inline-block;
      vertical-align: top;
      margin: 1em 0 0 0;
    }

    #example-3 img:first-of-type {
      margin-top: 0;
    }

    #example-3 .gm-scrollbar.-vertical .thumb {
      background-color: hsl(204, 100%, 50%);
    }

    #example-3 .gm-scrollbar.-vertical .thumb:hover {
      background-color: hsl(204, 100%, 60%);
    }
    /** ---------- 4 ---------- **/

    #example-4 {
      width: 170px;
      height: 200px;
    }
    /** ---------- 5 ---------- **/

    #example-5 {
      width: 200px;
      height: 120px;
    }

    #example-5 .example-content {
      width: 1200px;
    }
    /** ---------- 6 ---------- **/

    #example-6 {
      width: 25%;
      height: 30%;
    }

    #example-6 .example-content {
      width: 1000px;
    }

  </style>
</head>

<body>
  <div id="app">
    <gemini-scrollbar id="example-0" class="inline">
    </gemini-scrollbar>

    <gemini-scrollbar id="example-1" class="inline">
      <div class="example-content">
        <header>
          <h1>#1 Vertical Scrollbar</h1>
        </header>
        <section>
          <h2>Subtitle</h2>
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
        </section>
      </div>
    </gemini-scrollbar>

    <gemini-scrollbar id="example-2" class="inline">
      <div class="example-content">
        <header>
          <h1>#2 Vertical Scrollbar</h1>
        </header>
        <section>
          <h2>(with more content)</h2>
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, reiciendis totam nobis iste accusamus voluptas!
            Maiores tempore recusandae pariatur nulla consequuntur inventore accusantium molestias? Distinctio nemo culpa
            sapiente obcaecati officiis.</p>
        </section>
      </div>
    </gemini-scrollbar>

    <gemini-scrollbar id="example-3" class="inline" @ready="example_3_ready">
      <div class="example-content">
        <header>
          <h1>#3 Vertical Scrollbar</h1>
        </header>
        <section>
          <h2>(update method)</h2>
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
          <img @load="imgLoad" src="./assets/images/huge-reddit-visual-exploration.png" alt="">
          <img src="./assets/images/huge-reddit-visual-exploration.png" alt="">
          <img src="./assets/images/huge-reddit-visual-exploration.png" alt="">
          <img src="./assets/images/huge-reddit-visual-exploration.png" alt="">
          <img src="./assets/images/huge-reddit-visual-exploration.png" alt="">
        </section>
      </div>
    </gemini-scrollbar>

    <gemini-scrollbar id="example-4" class="inline">
      <div class="example-content">
        <header>
          <h1>#4 Scrollbars not required</h1>
        </header>
      </div>
    </gemini-scrollbar>

    <gemini-scrollbar id="example-5" class="inline">
      <div class="example-content">
        <header>
          <h1>#5 Horizontal Scrollbar</h1>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
      </div>
    </gemini-scrollbar>

    <gemini-scrollbar id="example-6" class="inline">
      <div class="example-content">
        <header>
          <h1>#6 Horizontal and Vertical Scrollbar</h1>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
      </div>
    </gemini-scrollbar>

    <gemini-scrollbar id="example-7" class="inline">
      <div class="example-content">
        <header>
          <h1>#7 No width or height defined</h1>
        </header>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa magnam consequuntur in aperiam recusandae tenetur,
          ratione enim magni quis tempora corporis iste facere sequi similique dolor inventore aut iusto! Saepe.</p>
      </div>
    </gemini-scrollbar>
  </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',
      data:{
        geminiScrollbar:null
      },
      methods:{
        imgLoad:function(){
          this.geminiScrollbar.update()
        },
        example_3_ready(geminiScrollbar){
          this.geminiScrollbar = geminiScrollbar
        }
      }
    })
  </script>
</body>

</html>