Question

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

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

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

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及更高版本。

它支持开箱即用的外观逻辑，但我不确定它是否完全符合您的需求。看看吧。

如果在不滚动时仍然需要滚动条在整个页面上消失，为了达到您的第3个要求，您可以根据需要覆盖插件css＆amp;使用插件支持的事件，例如：

更改默认外观逻辑，使其默认为不可见：

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

＆＃34;国产＆＃34;顺利消失滚动条

2 个答案: