Question

我正在尝试获得一个垂直导航列表，该列表旋转90度以便可以垂直滚动（相对于视口）。我们的想法是，菜单项可以动态添加，一旦添加完毕，一旦使用了完整的视口高度，就可以垂直滚动。

当前的解决方案几乎可以工作，它使列表水平扩展，如果您有一个窄的固定宽度导航栏，这是不理想的。

以下是2年前previous question的代码示例，以供说明。

＆＃13;

html, body {
  min-height:100%;
  max-height:100%;
  height:100%;
  font-family:Oswald, sans-serif, Arial;
  font-size:14px;
  background:#fff
}
a {
  text-decoration:none
}
li {
  list-style:none
}
ul {    
  margin:0
}
.main-nav {
  width:100vh;    
  height:45px;
  position:fixed;
  background:#4c4c4c;
  -webkit-transform-origin: left top;
  -webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav {    
  margin:0 auto;
  height:100%;        
}

ul.nav li {    
  margin-right:20px;
  float:right;
  height:100%;
  line-height:45px;
}
ul.nav li a {           
  color:#fff;    
}

＆＃13;

<div class="main-nav">
  <ul class="nav">
    <li><a href="#">HOME</a></li>
    <li><a href="#">METHODOLGY</a></li>
    <li><a href="#">PORTFOLIO</a></li>
    <li><a href="#">SERVICES</a></li>
    <li><a href="#">TEAM</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</div>

＆＃13;

Answer 1

position:fixed挡路。因为它位于窗口区域并且完全属于流量，当然无法按原样滚动

If you want it to scroll您可以将fixed设置为absolute

另一种方法absolute和writing-mode 你可以看看写模式，仍然使用变换来反转方向：

＆＃13;

ul {
  white-space:nowrap;
  writing-mode:vertical-lr;
  transform:scale(-1,-1);
  padding: 1em 0;
  position:absolute;/* not fixed !! */
}
li {
  display:inline;
}

＆＃13;

<ul class="nav">
        <li><a href="#">HOME</a></li>
        <li><a href="#">METHODOLGY</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">TEAM</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>

＆＃13;

您也可以使用flex和row-reverse：http://codepen.io/gc-nomade/pen/PNKeeq在首页/上方提供主页链接。

Answer 2

只需在display:flex选择器中添加ul.nav，然后在overflow-y:hidden

中设置overflow-x:auto和.main-nav

这是JSBIN：http://jsbin.com/qixapariku/1/edit?html,css,output

垂直对齐可滚动的旋转文本

2 个答案: