鼠标移动时滚动div内容

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>