Scroll div content on mouse move

Question

I have a little trouble with scrolling the div content only on mouse move. So no scrollbars are shown etc.

So I have 17 items. Every item is square 50x50 px. Mask is 300x50. So my mask is overflow: hidden and itemsWrapper has width of all subitems. I want to make scroll items horizontally on mousemove event. Can enyone give me some advice on this?

For now I have the following code:

$(document).ready(function() {
  $('#navMask').on('mousemove', function(e) {
    var leftOffset = $(this).offset().left;
    $('#itemsWrapper').css('left', -e.clientX + leftOffset);

    console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
  });
});

#navMask {
  position: relative;
  overflow: hidden;
  background: #ccc;
  margin: 0 5px;
  width: 300px;
  height: 50px;
}
#tabWrapper {
  position: absolute;
  margin-left: 0;
}
.tab {
  width: 50px;
  height: 50px;
  float: left;
  background: beige;
}
.tab:hover {
  background: #e4e4a1;
}

<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>

Also the number of items can be dynamically changed so I have another trouble to make it working.

Answer 1

Is this almost what you intends??

Just add the following style rules:

#itemsWrapper {
  position: absolute;
}
.item {
  width: 100px;
  display: inline-block;
}

Demo

$(document).ready(function() {
  $('#navMask').on('mousemove', function(e) {
    var leftOffset = $(this).offset().left;
    $('#itemsWrapper').css('left', -e.clientX + leftOffset);

    console.log($(this).outerWidth() + ' - ' + $(this)[0].scrollWidth);
  });
});

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

<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>