Question

我需要与此demo类似的功能，但我只需要滚动标签页头的功能。

我有一个div中的元素列表，我需要滚动这些项目，如演示标签页。

我尝试将绝对位置设置为内部元素。不过，我没有得到这个功能。

如何实现标签页眉滚动功能？

由于服务器端代码交互，我无法透露我的内容。

Answer 1

以下是您期望的演示

http://jsbin.com/opufow/4/edit

您需要先隐藏项目，然后使用动画进行滚动。

Answer 2

您可以使用iscroll.js水平或垂直滚动元素。这将为您提供平滑的滚动感觉。

检查演示链接

http://iscroll-js.googlecode.com/hg-history/bd496ab69c553b6e3d294c5f68200513215f5e75/examples/horizontal-scroll/index.html

您可以从以下位置下载Iscroll.js.

http://cubiq.org/iscroll

Answer 3

试试这个：http://jsbin.com/welcome/42790 我认为这是你正在寻找的效果。这是源代码：

<强> HTML

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <div class="scroll">
      <div id="parent" class="parent">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
        <div class="block">6</div>
        <div class="block">7</div>
      </div>
    </div>
    <button id="leftButton">&lt;</button>
    <button id="rightButton">&gt;</button>
  </body>
</html>

<强> CSS

.parent {
  width: 364px;
  height: 52px;
  background: #EDC9FF;
  margin-left: 0px;
}
.block {
  width: 50px;
  height: 50px;
  background: #C9E2FF;
  border: 1px solid #8FC3FF;
  float: left;
}
.scroll {
  overflow: hidden;
  width: 200px;
}

<强>的JavaScript

var timeout = 0;

window.onload = function () {
  var leftBtn = document.getElementById('leftButton'),
      rightBtn = document.getElementById('rightButton');

  leftBtn.addEventListener('mousedown', function () {
    multipleScroll(-2);
  }, false);

  leftBtn.addEventListener('mouseup', function () {
    clearTimeout(timeout);
  }, false);

  rightBtn.addEventListener('mousedown', function () {
    multipleScroll(2);
  }, false);

  rightBtn.addEventListener('mouseup', function () {
    clearTimeout(timeout);
  }, false);

};

function scroll(offset) {
  var parent = document.getElementById('parent'),
      current = parseInt(parent.style.marginLeft, 10) || 0;
  current += offset;
  parent.style.marginLeft = current + 'px';
}


function multipleScroll(offset) {
  timeout = setTimeout(function () {
    multipleScroll(offset);
    scroll(offset);
  }, 20);
}

滚动路径显示jquery

3 个答案: