Taiftech-LLC
/
admin.dukany.io


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>perfect-scrollbar</title>
    <link href="bootstrap-combined.min.css" rel="stylesheet">
    <link href="perfect-scrollbar.css" rel="stylesheet">
    <link href="prettify.css" rel="stylesheet">
    <style>
    .github-corner:hover .octo-arm {
      animation:octocat-wave 560ms ease-in-out;
    }
    @keyframes octocat-wave {
      0%,100% { transform:rotate(0); }
      20%,60% { transform:rotate(-25deg); }
      40%,80%{ transform:rotate(10deg); }
    }
    @media (max-width: 500px) {
      .github-corner:hover .octo-arm {
        animation:none;
      }
      .github-corner .octo-arm {
        animation:octocat-wave 560ms ease-in-out;
      }
    }
    </style>
    <style>
    html, body { background-color: #fcfcfe; }
    .body { padding: 50px 0px; }
    .logo { font-size:100px; text-align:center; line-height: 70px; }
    .description { padding-top: 20px; text-align:center; }
    .subtitle { padding: 70px 0 30px; }
    .list { width: 250px; margin: 0 auto; text-align: left; }
    .list li { margin-bottom: 5px; white-space: nowrap; }
    #demo { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
    #demo .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
    </style>
    <style>
    @import url(https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css);
    pre.prettyprint {
      text-align:left;
      width: 470px;
      margin:0px auto;
      font-size: 15px;
      font-family: 'Fira Code', Monaco, Menlo, Consolas, 'Courier New', monospace;
      background-color: #fafafc;
      padding: 15px 20px;
    }
    </style>
  </head>
  <body>
    <a href="https://github.com/utatti/perfect-scrollbar" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0; z-index: 100;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
    <div class="body">
      <h1 class="logo">perfect-scrollbar</h1>
      <p class="lead" style="text-align:center;">Minimalistic but perfect custom scrollbar plugin</p>
      <div class="description">
        <h2 class="subtitle"><i>perfect</i> means...</h2>
        <ul class="list">
          <li class="lead">No change on design layout</li>
          <li class="lead">No manipulation on DOM tree</li>
          <li class="lead">Use plain scrollTop and scrollLeft</li>
          <li class="lead">Scrollbar style is fully customizable</li>
          <li class="lead">Efficient update on layout change</li>
        </ul>

        <h2 class="subtitle">Demo</h2>
        <div id="demo">
          <div class="content">
          </div>
        </div>
        <div style="margin-top:15px;">
          <div class="input-prepend">
            <span class="add-on" style="width:100px;">Width</span>
            <input type="text" id="width" placeholder="600">
          </div>
          <div class="input-prepend">
            <span class="add-on" style="width:100px;">Height</span>
            <input type="text" id="height" placeholder="400">
          </div>
          <button id="button" class="btn btn-primary">Change Size!</button>
        </div>

        <h2 class="subtitle">Code</h2>
        <pre class="prettyprint">
const ps = new PerfectScrollbar(demoDiv);

button.addEventListener('click', () => {
  demoDiv.style.width = `${widthInput.value}px`;
  demoDiv.style.height = `${heightInput.value}px`;

  ps.update();
});
</pre>
        <h2 class="subtitle">Documentation</h2>
        <p class="lead">
          Please refer to the <a href="http://github.com/utatti/perfect-scrollbar">README</a>.
        </p>
        <h2 class="subtitle">License</h2>
        <p class="lead">
          The MIT License (MIT)
          <br>
          Copyright (c) 2012-2017 <a href="http://github.com/utatti">Hyunje Jun</a> and other <a href="https://github.com/utatti/perfect-scrollbar/graphs/contributors">contributors</a>.
        </p>
      </div>
    </div>
    <script src="perfect-scrollbar.min.js"></script>
    <script src="prettify.js"></script>
    <script>
    var $ = document.getElementById.bind(document);

    var demoDiv = $('demo');
    var widthInput = $('width');
    var heightInput = $('height');
    var button = $('button');

    var ps = new PerfectScrollbar(demoDiv);

    button.addEventListener('click', function () {
      demoDiv.style.width = (widthInput.value || 600) + 'px';
      demoDiv.style.height = (heightInput.value || 400) + 'px';

      ps.update();
    });

    prettyPrint();
    </script>
  </body>
</html>