3

我有一个导航链接列表，这些链接的样式在其父级的左侧和右侧交替浮动，中间有一个间隙。问题是，在较小的屏幕上，一些链接因此被隐藏。父容器（一个固定的侧边栏）作为一个整体不会滚动，我宁愿避免让整个侧边栏滚动。链接的 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 博客（此处）。如果您需要查看我在说什么，左侧边栏中的链接按描述排列。

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

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

有任何想法吗？

4

1 回答 1

0

更新：非 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/

于 2013-10-21T08:46:57.290 回答