scroll up down left right

stack overflow challenge

by Steven Martin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id='navMask'>
  <div id='itemsWrapper'>
    <div class='item'>1</div>
    <div class='item'>2</div>
    <div class='item'>3</div>
    <div class='item'>4</div>
    <div class='item'>5</div>
    <div class='item'>6</div>
    <div class='item'>7</div>
    <div class='item'>8</div>
    <div class='item'>9</div>
    <div class='item'>10</div>
    <div class='item'>11</div>
    <div class='item'>12</div>
    <div class='item'>13</div>
    <div class='item'>14</div>
    <div class='item'>15</div>
    <div class='item'>16</div>
    <div class='item'>17</div>
  </div>
</div>

CSS

#navMask {
  position: relative;
  overflow: hidden;
  background: #ccc;
  margin: 0 5px;
  width: 50px;
  height: 250px;
}
#tabWrapper {
  position: absolute;
  margin-left: 0;
}
.tab {
  width: 50px;
  height: 50px;
  float: left;
  background: beige;
}
.tab:hover {
  background: #e4e4a1;
}
#itemsWrapper {
  position: absolute;
}
.item {
  width: 200px;
  display: inline-block;
}

JavaScript

function mov(e) {
  var elem = document.getElementById('itemsWrapper')
  var offset = e.target.scrollTop
  var top = -e.clientY + offset; console.log(top)
  elem.style.top = top.toString() + 'px'
}

function movj(e) {
  $('#navMask').on('mousemove', function(e) {
    var offset = $(this).offset().top;
    var top = -e.clientY + offset; console.log(top)
    $('#itemsWrapper').css('top', top);
  });
}

document.getElementById('navMask').onmousemove = mov