鼠标移动时滚动div内容

Question

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

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

现在我有以下代码：

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此外，项目数量可以动态更改，因此我还有其他麻烦使其正常工作。

Answer 1

这几乎是你想要的吗？

只需添加以下样式规则：

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

演示

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;