uiscroll

by uiwwnw

HTML

<div class="wrap" uiScrollWrap>
  <div uiScroll>
    <p class="in">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio voluptates nisi nesciunt nulla quasi nam blanditiis eligendi, cupiditate optio, sunt quod, nobis eum culpa, nemo at et ducimus minus. Totam similique inventore repellat facere dicta eligendi
      voluptatibus, sapiente sit aliquid, dolorum accusantium rerum optio! Ipsum, voluptatem! Quibusdam officiis sint voluptas impedit ullam a est dolores cupiditate accusamus dignissimos itaque doloremque, ipsum magnam debitis, voluptatibus possimus,
      numquam nobis, voluptate minima consequuntur nam mollitia quaerat. Expedita eaque iure, cumque aspernatur perspiciatis eveniet quos, quasi sapiente minima, ab, error cupiditate alias. Sunt expedita delectus possimus non, officia dolore aperiam atque
      unde quos hic, quasi natus commodi consequatur soluta ipsum? Accusantium maxime asperiores aliquam cumque doloremque porro nulla doloribus ratione quidem! Ex itaque suscipit nemo corporis temporibus quibusdam impedit animi, numquam aliquid. Enim
      modi ad veritatis ducimus, esse perferendis, numquam veniam ut quisquam dolorem, optio eligendi velit molestias. Explicabo repellendus dolorum voluptas? Et sed, cum error dicta possimus placeat natus sit deserunt consectetur beatae aspernatur, quo
      sapiente delectus blanditiis! Quibusdam, doloribus, saepe? Nostrum dolorum, excepturi repellat asperiores aliquid obcaecati vero, molestias magnam accusamus, distinctio, blanditiis officia. Ipsa cum vitae, praesentium nobis architecto neque libero
      doloremque iste ex exercitationem aspernatur, voluptas iusto voluptatem tempora quam repudiandae odit unde, placeat nam reprehenderit id, nihil alias incidunt. Id sit totam aspernatur inventore nemo amet provident! Repellat nisi beatae quidem rem
      labore facere, iste natus, accusantium cum cumque, doloremque incidunt voluptas culpa? Reprehenderit assumenda facilis consequatur, quo? Praesentium...

SCSS

.wrap {
  height: 500px;
  overflow: hidden;
  
  .in {
    /* height: 999px; */
    
  }
}

JavaScript

;
(function() {
  var app = (function() {
    var sX = 0;
    var sY = 0;
    var eX = 0;
    var eY = 0;
    var fX = 0;
    var fY = 0;
    var touch;
    requestAnimationFrame(function() {
      console.log('dasd');
    });
    var start = function(e) {
      touch = true;
      sX = e.x - fX;
      sY = e.y - fY;
      console.log(sX, sY);
      this.querySelector('[uiScroll]').setAttribute('click', 'onmousedown');
    }
    var end = function(e) {
      touch = false;
      fX = -sX + e.x;
      fY = -sY + e.y;
      this.querySelector('[uiScroll]').setAttribute('click', 'onmouseup');
    };
    var drag = function(e) {
      eX = e.x;
      eY = e.y;
      var x = -sX + eX;
      var y = -sY + eY;
      if (touch)
        this.querySelector('[uiScroll]').setAttribute('style', 'overflow: hidden; transform: translate(' + x + 'px, ' + y + 'px);clip: rect(0, 0, 0, 0);');
    };
    document.querySelector('[uiScrollWrap]').onmousedown = start;
    document.querySelector('[uiScrollWrap]').onmouseup = end;
    document.querySelector('[uiScrollWrap]').onmousemove = drag;
  }())
}())

;