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

Question

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

当前的解决方案几乎可以用，它会使列表水平扩展，如果您的固定宽度的导航栏较窄，则不理想。

这是两年前上一个问题的代码示例，以供说明。

吉宾

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

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

Answer 1

position:fixed 。 因为它位于窗口区域和整个流程中，所以当然无法按原样滚动

如果要滚动 ，可以将fixed设置为absolute

---

另一种方法为absolute ，并且为writing-mode您可以查看write-mode，但仍然使用transform来反转方向：

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

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

您也可以使用flex和row-reverse ： http : //codepen.io/gc-nomade/pen/PNKeeq将首页链接置于首页/顶部。

Answer 2

只需在ul.nav选择器中添加display:flex并在.main-nav设置overflow-y:hidden和overflow-x:auto

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