css - 如何使用 CSS 中的自定义样式滚动条模仿 OS X 滚动条行为

Question

我想用 CSS 设置滚动条的样式，但我也希望它的行为类似于 OS X 的 native 滚动条(即仅在滚动时显示，空闲时消失)。

有没有办法用纯 CSS 做到这一点？

Answer 1

我认为浏览器无法仅使用 CSS 对 native UI 进行如此多的控制。

您需要使用 JavaScript 来操作滚动事件。幸运的是，您不必重新发明轮子，请考虑以下插件:http://enscrollplugin.com/

• 使用 jQuery
• 使用 CSS 控制滚动条的外观和淡入淡出

$('#scrollbox3').enscroll({
    showOnHover: true,
    verticalTrackClass: 'track3',
    verticalHandleClass: 'handle3'
});

#scrollbox3 {
    overflow: auto;
    width: 400px;
    height: 360px;
    padding: 0 5px;
    border: 1px solid #b7b7b7;
}

.track3 {
    width: 10px;
    background: rgba(0, 0, 0, 0);
    margin-right: 2px;
    border-radius: 10px;
    -webkit-transition: background 250ms linear;
    transition: background 250ms linear;
}

.track3:hover,
.track3.dragging {
    background: #d9d9d9; /* Browsers without rgba support */
    background: rgba(0, 0, 0, 0.15);
}

.handle3 {
    width: 7px;
    right: 0;
    background: #999;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    -webkit-transition: width 250ms;
    transition: width 250ms;
}

.track3:hover .handle3,
.track3.dragging .handle3 {
    width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://enscrollplugin.com/releases/enscroll-0.6.1.min.js"></script>

<div id="scrollbox3">
    <h1>New Scrolling Window</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a justo erat, volutpat hendrerit dolor. Sed urna nibh, dapibus at egestas non, vulputate ut quam. Morbi a erat tristique tellus varius venenatis. Aenean lacinia sem eget turpis fringilla commodo. Sed lorem nisi, viverra a interdum nec, varius eu enim. Donec ornare, nunc quis eleifend iaculis, nulla eros mollis tellus, quis faucibus risus odio non lectus. Maecenas ac velit non metus rhoncus commodo. Nunc ligula est, ultricies sed mattis sed, dapibus at arcu. Maecenas lacinia nisl ut sem bibendum ac condimentum purus facilisis. Curabitur ut nibh lobortis libero interdum vehicula vel quis nulla.</p>
    
    <p>Suspendisse et massa urna. Donec eu lorem nec felis dapibus aliquam viverra in quam. Suspendisse ultrices, nisi ac venenatis porttitor, erat turpis dapibus augue, sed rutrum nunc ante sed enim. Aliquam et tempus mi. Nullam malesuada, nunc a eleifend pretium, justo lorem tempus justo, id adipiscing dolor ipsum sed velit. Maecenas odio massa, feugiat vel sodales ut, placerat at quam. Cras viverra diam vitae diam elementum vitae aliquet erat tincidunt. Quisque fringilla neque in lacus tempor cursus. Curabitur eget nulla et nisi dignissim tempor vel non risus. Mauris ac ipsum metus, a auctor massa. Nunc eros ante, ullamcorper a mollis nec, aliquam sed est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

来源:http://jsfiddle.net/jstoudt/f2Y5S/