0

我需要与此演示类似的功能，但我只需要滚动选项卡标题的功能。

我在 div 中有元素列表，我需要滚动这些项目，如演示选项卡标题。

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

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

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

4

3 回答 3

1

这是您所期望的演示

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

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

于 2012-11-02T12:58:24.700 回答
0

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

检查演示链接

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

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

http://cubiq.org/iscroll

于 2012-11-02T10:18:50.807 回答
0

试试这个： 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);
}
于 2012-11-02T10:45:40.857 回答