html - 如何让滚动条出现在 div 的中心？

Question

我有一个导航链接列表，这些链接的样式设置为交替 float 在其父级的左侧和右侧，中间有一个间隙。问题是，在较小的屏幕上，一些链接因此被隐藏。父容器(一个固定的侧边栏)作为一个整体不会滚动，我宁愿避免让整个侧边栏滚动。链接的 CSS 代码如下:

#links {
            margin: 10px 0;
            text-align: center;
            overflow: hidden;
        }
        a.sidebarlink {
            display: block;
            padding: 3px 5px;
            background-color: rgb(87,10,79);
            color: white;
            font-weight: bold;
            width: 43%;
            max-height: 17px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-decoration: none;
            text-shadow: none;
            margin: 2px 0px;
        }
        a.sidebarlink:hover {
            animation: sidebarlink 0.4s;
            -webkit-animation: sidebarlink 0.4s;
            border-width: 5px !important;
        }
        #links a:nth-child(2n-1) {
            float: left;
            clear: left;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            border-left: 0px solid white;
            text-align: right;
        }
        #links a:nth-child(2n) {
            float: right;
            clear: right;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
            border-left: none;
            border-right: 0px solid white;
            text-align: left;
            margin: 2px 0px 2px 7px;
        }

所以，问题是......没有太多麻烦，我可以设置一个滚动条出现在中心吗？该页面是一个简单的 Tumblr 博客 (here)。如果您需要查看我在说什么，则左侧边栏中的链接已按说明排列。

如有必要，我可以更改标记，但我想要一个滚动条，而不是将容器沿中心向下划分并以两个滚动条结束。

虽然我认为这不太可能，但我更喜欢它是纯 CSS 的。如果可能的话，我怀疑它很可能会使用 webkit 滚动条类，因此只对 Chrome 用户可见。

有什么想法吗？

Answer 1

更新:非JS方法

基于与以下相同的标记:

将滚动条放在左侧:

#right {
    overflow-y: scroll;
    direction: rtl;
    text-align: left; /* override direction */
    right: -20px;
}

演示:http://jsfiddle.net/Sjx2v/1/

---

这是我的想法:

允许两列都有滚动条，但放置最右边的列以使滚动条不可见。

然后使用JS调整列的大小使其相等。

最后向列添加滚动事件以使其保持内联。

HTML

<div id="container">
    <div id="left" class="column">
        <p>left</p><p>left</p><p>left</p><p>left</p>
    </div>
    <div id="right" class="column">
        <p>right</p><p>right</p><p>right</p><p>right</p>
    </div>
</div>

CSS

#container {
    height: 200px;
    border: 1px solid red;
    overflow: hidden;
    position: relative;
}

p {
    margin-top: 50px;
}

.column {
    height: 100%;
    width: 48%;
    padding: 1%;
    overflow-y: scroll;
    position: absolute;
}

#right {
    right: -20px; /* Hide the right-most scrollbar */
}

JQuery

var column = $('.column');
var left = $('#left');
var right = $('#right');

// Find the maximum height of the columns
var maxH = Math.max(left.height(), right.height());

// Set columns to same height
column.height(maxH);

column.scroll(function() {
    right.scrollTop($(this).scrollTop());
    left.scrollTop($(this).scrollTop());
});

演示:http://jsfiddle.net/Sjx2v/