“自制”顺畅消失滚动条

Question

我试过jQuery plugin（Malihu滚动条），在我的项目中添加了惊人的自定义滚动条，它可以在简单的网站中使用。 但是，我厌倦了它在相当复杂的自适应布局项目中使用它，它不工作。我不明白Malihu滚动条机制（源代码非常大），因此不知道如何适应我的项目。

所以，我设法创建滚动条，我可以理解的机制。的要求是：

1. 厚
2. 半透明
3. 滚动结束时顺利消失，开始滚动的时候再次出现。
4. 不影响布局（通过图形编辑器的语言，滚动条位于顶层，不影响其他层）。
5. 跨浏览器和跨平台。

1和2的解决方案非常简单，接下来是关于布局的动画和独立性。请告诉我最简单的解决方案（确定使用jQuery）。

我准备了jsfiddle（目前在Chrome浏览器中正确的滚动条显示），并清除了1个和2个任务以节省您的时间。 （没有必要在这里贴了源代码，但srackoverflow需要它的jsfiddle链接）

html { 
    overflow: auto; 
} 
body { 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

/* Let's get this party started */ 
::-webkit-scrollbar { 
    width: 5px; 
} 

::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(50,50,50,0.5); 
} 

Answer 1

我个人建议这个众所周知的插件：Prefect Scrollbar

这是非常个性化和容易使用。 该插件旨在用于现代浏览器，并支持IE 10及更高版本。

它支持外观逻辑开箱即用，但我不确定它完全适合您的需求，因为它是。了解更多。

如果您仍然需要滚动条消失的整个页面上时不滚动，以达到你的第三个要求，你可以根据需要&使用插件支持的事件，如覆盖插件CSS：

改变默认的外观逻辑，使其隐形作为默认：

.ps-container:hover>.ps-scrollbar-x-rail, 
.ps-container:hover>.ps-scrollbar-y-rail { 
    opacity: 0; 
} 

并添加此：

.is-scrolling .ps-scrollbar-x-rail, 
.is-scrolling .ps-scrollbar-y-rail { 
    opacity: .6; 
} 

然后添加一个自定义类（例如is-scrolling）给你应用的插件同样的元素，由插件，才使滚动条出现，如射击滚动的事件：

$(document).on('ps-scroll-x ps-scroll-y', function() { 
    $("body").addClass("is-scrolling"); 
}); 

Answer 2

我个人推荐的好插件：enscroll

使用enscroll jQuery插件，能够为这些滚动条编写自己的样式只是几行Javascript的问题。

• 滚动条的位置和大小 您移动滚动窗格中自动调整，调整滚动窗格或修改 滚动窗格中的内容
• 支持触摸事件 - 全面支持移动设备，片剂 和其他触摸屏设备 - 现在带有滚动缓和
• 任选地完成时，保持隐藏在滚动，直到用户悬停在 视图窗格
• 控制多远滚动元件滚动时使用鼠标滚轮 或键盘
• 您可以控制滚动条元素的类名称上的箭头键允许滚动条样式的所有 组合，你需要在同一个页面
• 上保留语义 - 你不需要在您的 标记中添加任何额外的标记。由于enscroll将这些客户端，你可以保持 初始DOM奉承

HTML

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

CSS

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

JS

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

这里我做一个小的演示。 Have a look.