Question

我看过我认为所有的滚动条代码，但还没有找到一个不使用jQuery或有点复杂库的简单代码。

是否有人使用javascript创建了自己的简单滚动条？我正在寻找的是一个如何做到这一点的例子。特别是我有一个简单的bootstrap网页：

<body>
   <header> ....</header>
   <main> ......</main>
</body>

我想要做的是，如果那里的内容大于适合单个页面，则该区域右侧会出现一个小的页面滚动条。出于样式目的，我希望不成为浏览器默认滚动条。

这是我正在寻找的一个例子，但这个确实使用了jQuery，所以我不能在我的网站上使用它：

http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

我在现代浏览器IE9及以上版本中使用javascript寻找一些方法。我认为这对许多人来说很有用，我为此开了一个200的赏金，希望有人可以提供一个可拖动的页面滚动条的好例子，它也会在页面内容区域上响应鼠标滚轮。

只是一个更新。我不是在寻找移动解决方案。我只是在寻找一种可以在PC / Mac浏览器中运行的解决方案。该网站未设置或适用于手机。它可以在iPad或平板电脑上使用但是为了满足这些需求，我希望能够让滚动条默认只使用普通的平板电脑滚动方法。

Answer 1

令人惊讶的是，使用vanilla JavaScript并没有一个很好的简单解决方案。我制作了一个纯JS轻量级，最小的跨浏览器解决方案。 根据自己的需求和美学进行调整

*更新2019
W3C有一个标准轨道的工作文档，通过css规范开箱即用。虽然限制，但如果您想使用尖端css，现在可以通过scrollbar-color和scrollbar-width设置滚动条的样式。有关详细信息，请查看https://drafts.csswg.org/css-scrollbars/

<强>示例：
这是fiddle和CodePen

HTML

<body>
    <div id="main" class="scrollable">
        <div class="content-wrapper">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt accusamus maxime voluptatem quasi. Recusandae optio nobis ratione iste consectetur consequatur cupiditate saepe laborum natus neque a provident eum explicabo delectus qui accusantium nostrum reiciendis soluta hic ut at sed laboriosam possimus repudiandae deserunt velit rerum. Aliquam ratione itaque corrupti aperiam quisquam unde aspernatur odio id repellendus corporis eaque expedita in ab minus possimus! Quo tempore consequatur repellat consectetur nemo molestiae perferendis ipsum esse nesciunt blanditiis nobis dicta? Laudantium quaerat inventore deleniti exercitationem explicabo quos pariatur sunt earum labore sed eius blanditiis architecto consequuntur ad consectetur unde sapiente nisi. Sunt eos.</p>
            </div>
        </div>
    </div>
    <div>Not special and not contained within scrolling</div>
</body>

<强> CSS

.scrollable {
    padding: 0% 10%;
    position: relative;
    border: 1px solid gray;
    overflow: hidden;
    height: 400px;
}

.scrollable.showScroll::after {
    position: absolute;
    content: '';
    top: 5%;
    right: 7px;
    height: 90%;
    width: 3px;
    background: rgba(224, 224, 255, .3);
}

.scrollable .content-wrapper {
    width: 100%;
    height: 100%;
    padding-right: 50%;
    overflow-y: scroll;
}
.scroller {
    z-index: 5;
    cursor: pointer;
    position: absolute;
    width: 10px;
    border-radius: 5px;
    background: rgb(111, 111, 190);
    top: 0px;
    right: 3px;
    -webkit-transition: top .08s;
    -moz-transition: top .08s;
    -ms-transition: top .08s;
    -o-transition: top .08s;
    transition: top .08s;
}
.content {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

JS

(function () {

var scrollContainer = document.querySelector('.scrollable'),
    scrollContentWrapper = document.querySelector('.scrollable .content-wrapper'),
    scrollContent = document.querySelector('.scrollable .content'),
    contentPosition = 0,
    scrollerBeingDragged = false,
    scroller,
    topPosition,
    scrollerHeight;

function calculateScrollerHeight() {
    // *Calculation of how tall scroller should be
    var visibleRatio = scrollContainer.offsetHeight / scrollContentWrapper.scrollHeight;
    return visibleRatio * scrollContainer.offsetHeight;
}

function moveScroller(evt) {
    // Move Scroll bar to top offset
    var scrollPercentage = evt.target.scrollTop / scrollContentWrapper.scrollHeight;
    topPosition = scrollPercentage * (scrollContainer.offsetHeight - 5); // 5px arbitrary offset so scroll bar doesn't move too far beyond content wrapper bounding box
    scroller.style.top = topPosition + 'px';
}

function startDrag(evt) {
    normalizedPosition = evt.pageY;
    contentPosition = scrollContentWrapper.scrollTop;
    scrollerBeingDragged = true;
}

function stopDrag(evt) {
    scrollerBeingDragged = false;
}

function scrollBarScroll(evt) {
    if (scrollerBeingDragged === true) {
        var mouseDifferential = evt.pageY - normalizedPosition;
        var scrollEquivalent = mouseDifferential * (scrollContentWrapper.scrollHeight / scrollContainer.offsetHeight);
        scrollContentWrapper.scrollTop = contentPosition + scrollEquivalent;
    }
}

function createScroller() {
    // *Creates scroller element and appends to '.scrollable' div
    // create scroller element
    scroller = document.createElement("div");
    scroller.className = 'scroller';

    // determine how big scroller should be based on content
    scrollerHeight = calculateScrollerHeight();

    if (scrollerHeight / scrollContainer.offsetHeight < 1){
        // *If there is a need to have scroll bar based on content size
        scroller.style.height = scrollerHeight + 'px';

        // append scroller to scrollContainer div
        scrollContainer.appendChild(scroller);

        // show scroll path divot
        scrollContainer.className += ' showScroll';

        // attach related draggable listeners
        scroller.addEventListener('mousedown', startDrag);
        window.addEventListener('mouseup', stopDrag);
        window.addEventListener('mousemove', scrollBarScroll)
    }

}

createScroller();


// *** Listeners ***
scrollContentWrapper.addEventListener('scroll', moveScroller);
}());

这个概念很简单。我们有一个带有可滚动＆＃39;的主要div。类。 JavaScript识别此元素并附加一个滚动条div，您可以使用CSS设置自己的样式。通过嵌套content-wrapper子div，我们可以有效地将本机滚动器推送到父div之外，同时仍然控制填充。

这是一张图： Scroll Diagram

我们需要保持原生滚动功能的原因是因为JavaScript滚动事件仅触发已设置为滚动的溢出的元素。见MDN reference on scroll。好处是，如果JS被禁用，我们仍然可以优雅地回退到没有滚动条的滚动。

注意
您应该注意，在某些情况下，您必须调整版本以重新计算卷轴尺寸：
1.）屏幕大小调整或
2.）如果附加了更多内容。

其次，如果您有多个可滚动的＆＃39;则必须进行修改。元素。在这种情况下，您需要遍历这些元素以附加一个滚动条div并监听滚动事件。

Answer 2

我知道已经有了这个问题的答案，但是一旦OP需要一个简单的vanilla javascript解决方案，它适用于现代浏览器 - 而且我认为更多的人可能也需要它，我会迟到这里回答这个问题，因为我开发了一个very simple and lightweight library in pure vanilla JS（DEMO），并且在gzipping和minification之后只有1KB。

它使用原生滚动，因此适用于所有现代浏览器（Firefox，Chrome，Opera，Safari，Edge）以及IE10和IE11。您也可以通过包含classList polyfill在IE9中使用它。

支持所有Android，iOS和Windows Phone浏览器。

请在此处查看更详细的答案：Custom scrollbars

或阅读SimpleScrollbar's Github README page中的完整教程。

Answer 3

有一个很棒的baron.js library。它可以是jQuery用户或没有它。这个想法与@AdamSchuld在他的回答中所描述的完全相同。

它的优点：

不替换本机系统滚动机制（当您希望滚动条看起来自定义但保存原始平台或设备行为时，这一点非常重要。）
可自定义的滚动条设计，支持完整的CSS。
没有对jQuery的强烈依赖。
插件系统（可固定标题，粘性页脚，自动测试等）
可以隐藏在隐藏的块上

这是simple demo of it。

如何在不使用jQuery的情况下创建简单的页面垂直滚动条？

3 个答案: