Question

我目前正在将一个网站作为学校项目的一部分。在这个网站上，我想尝试一些有趣，新颖和不同的东西。不幸的是，我已经离开并挖了一个深刻的洞，它很快到期了，所以我真的很感激任何帮助。

现在问题就在眼前：

我决定写四页;只有那些页面更像是＆＃39;标签＆＃39;每个人都在自己的div里面。单击链接时，会运行一小段javascript将左侧属性设置为x * screenWidth像素，其中x等于相对于当前查看页面的数字。

即如果我正在查看第1页，那么第0页x = -1;第2页x = 2;对于第3页x = 3.
同样，如果第3页正在查看第0页x = -3;对于第1页x = -2;对于第2页x = -1。

然后通过应用位置：固定;对于标签的每个div id和一个过渡，我可以做一个整洁的小滑动动画，因为我在不同页面之间切换，其他页面刚刚固定在视口区域的左侧或右侧。

我的问题是，在每个标签上，我还需要能够垂直滚动，因为我无法看到我的大部分内容。不幸的是，随着div的固定，这似乎不可能。我已经尝试了其他位置属性：relative是最接近工作的，但是每个标签最终都与顶层的每个页面级联 - 例如。

page 0
       page 1
              page 2
                     page 3

此外，我尝试同时浮动元素，但这也不起作用。

这是我在JSFiddle中看到的代码模型 - http://jsfiddle.net/OliverGriffin/W47pG/。不幸的是，在JS Fiddle中实际上并没有工作所以我创建了一个非常粗略的html文档，其中包含了我认为相关代码的所有内容。只需将其复制并粘贴到HTML文档中即可运行

这是CSS（因为堆栈溢出代码的东西正在为我播放） - 只需将它放在＆lt; style＆gt;中的html文档的顶部。标签

#container {
    display: block;
}
nav {
    position: fixed;
    display: block;
}
#homeTab, #xTab, #yTab, #zTab {
    position: fixed;
    top: 50px;
    transition: 2s;
    -webkit-transition: 2s;
    -moz-transition: 2s;
    -o-transition: 2s;
    -ms-transition: 2s;
}

然后是HTML和JavaScript，在其下面：

<body>
    <header>
        <nav>
            <a href="#homeTab" onClick="page(0);" title="Home">home</a>
            <a href="#xTab" onClick="page(1);" title="x">page x</a>
            <a href="#yTab" onClick="page(2);" title="y">page y</a>
            <a href="#zTab" onClick="page(3);" title="z">page z</a>
        </nav>
    </header>
    <div id='container'>
        <div id="homeTab">
            <p>Home page</p>
        </div>
        <div id="xTab">
            <p>Page X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</p>
        </div>
        <div id="yTab">
            <p>Page Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y</p>
        </div>
        <div id="zTab">
            <p>Page Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z</p>
        </div>
    </div>
</body>

<script>
var container = document.getElementById('container');
var homeTab = document.getElementById('homeTab');
var xTab = document.getElementById('xTab');
var yTab = document.getElementById('yTab');
var zTab = document.getElementById('zTab');

if (typeof window.innerWidth != 'undefined') {
    var vpwidth = window.innerWidth;
}

homeTab.style.width = vpwidth + 'px';
xTab.style.width = vpwidth + 'px';
yTab.style.width = vpwidth + 'px';
zTab.style.width = vpwidth + 'px';

/** POSITIONS THE TABS BASED ON WHICH TAB SHOULD BE SHOWING **/
function page(tab) {
    switch (tab) {
        case 0:
            homeTab.style.left = '0px';
            xTab.style.left = vpwidth + 'px';
            yTab.style.left = 2 * vpwidth + 'px';
            zTab.style.left = 3 * vpwidth + 'px';

            break;
        case 1:
            homeTab.style.left = (0 - vpwidth) + 'px';
            xTab.style.left = '0px';
            yTab.style.left = vpwidth + 'px';
            zTab.style.left = 2 * vpwidth + 'px';
            break;
        case 2:
            homeTab.style.left = (0 - 2 * vpwidth) + 'px';
            xTab.style.left = (0 - vpwidth) + 'px';
            yTab.style.left = '0px';
            zTab.style.left = vpwidth + 'px';
            break;
        case 3:
            homeTab.style.left = (0 - 3 * vpwidth) + 'px';
            xTab.style.left = (0 - 2 * vpwidth) + 'px';
            yTab.style.left = (0 - vpwidth) + 'px';
            zTab.style.left = '0px';
            break;
        default:
            homeTab.style.left = '0px';
            xTab.style.left = vpwidth + 'px';
            yTab.style.left = 2 * vpwidth + 'px';
            zTab.style.left = 3 * vpwidth + 'px';
            break;
    }
}
page(0);
</script>

我真的很感激一种垂直滚动的方法，同时尽可能保持我的水平标签。有没有更好的方法可以做到这一点？谢谢你的时间。

P.S。如果答案不涉及jquery，我更愿意。我不知道如何使用它，而且我没有足够的时间学习。

Answer 1

你看起来像这样简单吗？（仅涉及溢出属性）http://jsfiddle.net/InferOn/C8KgM/

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      #container {
        display: block;
      }

      nav {
        position: fixed;
        display: block;
      }

      #homeTab, #xTab, #yTab, #zTab {
        position: fixed;
        top: 50px;
        transition: 2s;
        -webkit-transition: 2s;
        -moz-transition: 2s;
        -o-transition: 2s;
        -ms-transition: 2s;
      }

      .ttab{
      height:300px;
      overflow-y:scroll;
      }
    </style>
</head>
<body>
  <header>
    <nav>
      <a href="#homeTab" onclick="page(0);" title="Home">home</a>
      <a href="#xTab" onclick="page(1);" title="x">page x</a>
      <a href="#yTab" onclick="page(2);" title="y">page y</a>
      <a href="#zTab" onclick="page(3);" title="z">page z</a>
    </nav>
  </header>
  <div id='container'>
    <div id="homeTab">
      <p>Home page</p>
    </div>
    <div id="xTab" class="ttab">
      <p>Page X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</p>
    </div>
    <div id="yTab" class="ttab">
      <p>Page Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y<br>Y</p>
    </div>
    <div id="zTab" class="ttab">
      <p>Page Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z<br>Z</p>
    </div>
  </div>
</body>

<script>
  var container = document.getElementById('container');
  var homeTab = document.getElementById('homeTab');
  var xTab = document.getElementById('xTab');
  var yTab = document.getElementById('yTab');
  var zTab = document.getElementById('zTab');

  if (typeof window.innerWidth != 'undefined') {
    var vpwidth = window.innerWidth;
  }

  homeTab.style.width = vpwidth + 'px';
  xTab.style.width = vpwidth + 'px';
  yTab.style.width = vpwidth + 'px';
  zTab.style.width = vpwidth + 'px';

  /** POSITIONS THE TABS BASED ON WHICH TAB SHOULD BE SHOWING **/
  function page(tab) {
    switch (tab) {
      case 0:
        homeTab.style.left = '0px';
        xTab.style.left = vpwidth + 'px';
        yTab.style.left = 2 * vpwidth + 'px';
        zTab.style.left = 3 * vpwidth + 'px';

        break;
      case 1:
        homeTab.style.left = (0 - vpwidth) + 'px';
        xTab.style.left = '0px';
        yTab.style.left = vpwidth + 'px';
        zTab.style.left = 2 * vpwidth + 'px';
        break;
      case 2:
        homeTab.style.left = (0 - 2 * vpwidth) + 'px';
        xTab.style.left = (0 - vpwidth) + 'px';
        yTab.style.left = '0px';
        zTab.style.left = vpwidth + 'px';
        break;
      case 3:
        homeTab.style.left = (0 - 3 * vpwidth) + 'px';
        xTab.style.left = (0 - 2 * vpwidth) + 'px';
        yTab.style.left = (0 - vpwidth) + 'px';
        zTab.style.left = '0px';
        break;
      default:
        homeTab.style.left = '0px';
        xTab.style.left = vpwidth + 'px';
        yTab.style.left = 2 * vpwidth + 'px';
        zTab.style.left = 3 * vpwidth + 'px';
        break;
    }
  }
  page(0);
</script>

</html>

在水平“标签”中垂直滚动

1 个答案: