鼠标移动时滚动div内容

Question

我只是在鼠标移动时滚动div内容有点麻烦.所以没有显示滚动条等.

所以我有17个项目.每件商品均为50x50像素.面膜是300x50.所以,我的面具是overflow: hidden和itemsWrapper拥有所有子项的宽度.我想在mousemove事件上水平滚动项目.enyone能给我一些建议吗？

现在我有以下代码:

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

项目的数量也可以动态改变,所以我有另一个麻烦,使它工作.

Answer 1

这几乎是你想要的吗？

只需添加以下样式规则:

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

演示

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