Custom scrollbar plugin (original work)

Add-ons

2026-07-25 22:32 3 次浏览 • 0 次下载 7.6KB

Plugin description: Implements custom scrollbars using JavaScript. Supports setting the scrollbar color and width, enabling or disabling XY-axis scrollbars, and configuring automatic scrollbar hiding.

Last updated: 2018/11/19 10:22:26 PM

Changelog:

1. Added the scroll animation parameter time, which defaults to 0. A recommended setting is 100.

var oMyBar4 = new MyScrollBar({
    selId: 'wrapper4',
    time: 100
})

2. Modified my_scrollbar to support dynamically adding data. The scrollbar can be displayed using max-height.

var oMyBar5 = new MyScrollBar({
    selId: 'wrapper5'
}) oAddScroll5Btn.onclick = function() {
    var oP = document.createElement('p');
    oP.innerHTML = 'abcdefg';
    oScrollBox5.appendChild(oP); // Important points 
    oMyBar5.setSize();
}
oDelScroll5Btn.onclick = function() {
    var oP = oScrollBox5.lastElementChild;
    oScrollBox5.removeChild(oP); // Important points 
    oMyBar5.setSize();
}

Last updated: 2018/1/12 5:52:55 PM

Changelog:Modified the removeClass function

Last updated: 2018/1/10 7:28:07 PM

Changelog:Added method: jump(). The parameter is an object.

Purpose:Jump to a specified position

o.id -> The ID of the element to jump to;

o.pos -> The exact position to jump to. It can be a string ('top', 'bottom', 'left', or 'right') or an object ({top: number, left: number}). When using an object, set top to scroll the Y-axis scrollbar, or set both top and left to scroll both axes.

o.time -> Scroll animation duration. If not set, no animation is applied.

Note: If id exists, pos will be ignored.

Examples:

1. Jump to the top

oBtn3.onclick = function () {
    oMyBar1.jump({
        pos: 'top',
        time: 400
    })
}

2. Jump to the position of the node with ID p14

oBtn2.onclick = function () {
    oMyBar1.jump({
        id: 'p14',
        time: 400
    })
}

3. Jump to a position 500 pixels from the top

oBtn5.onclick = function () {
    oMyBar1.jump({
        pos: {
            top: 200
        },
        time: 400
    })
}

Last updated: 2018/1/9 5:01:46 PM

Changelog:Added the enterColor configuration. The scrollbar changes color when the mouse hovers over it and returns to its original color when the mouse moves away and is released. If this option is not set, the scrollbar color remains unchanged on hover.

Last updated: 2018/1/2 11:15:32 AM

Changelog:

1. Fixed an issue where scrolling could not reach the end when the wrapper had padding;

2. Added the borderRadius parameter to set the scrollbar's rounded corners. The default value is half of the width parameter. To disable rounded corners, set broderRadius:0;

Last updated: 2017/12/28 11:33:23 AM

Changelog:When calculating the content height plus padding, the border height was subtracted, causing incorrect wrapper height when the wrapper's ancestor element was hidden during scrollbar instance creation. Another issue occurred when the wrapper's ancestor element was hidden, causing the wrapper and scrolling layer to have zero width and height, so the scrollbar was not initialized.

Usage

To use this plugin:

1. The DOM structure must contain a wrapper and a scrolling layer, as shown below. The wrapper is the div with id="wrapper1" (an ID is required), and the scrolling layer is the div with id="scrollOne" (an ID is optional).

<div class='box' id='wrapper1'>
    <div class="scroll" id="scrollOne">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
    </div>
</div>

2. If the wrapper needs a Y-axis scrollbar, its Y-axis height must be fixed, with overflow-y:hidden;. The same applies to the X-axis.

/* If an X-axis scrollbar is needed, the wrapper must have a fixed width and overflow:hidden in the X direction; the same applies to the Y-axis. */
.box {
    width: 600px; height: 300px; border: 1px solid #444; margin: 10px auto; padding: 0; overflow: hidden;
}

3. Include the my_scrollbar.js file

4. Create an instance using the constructor. Only selId is a required configuration parameter.

var oMyBar1 = new MyScrollBar({
    selId: 'wrapper1'
});

5. The scrollbar is available immediately after the instance is created.

6. All configuration parameters:

selId -> ID of the scrolling content container (required)

width -> Scrollbar width (default: 10; please use an even number)

bgColor -> Color of the scrollbar track (default: #eaeaea)

barColor -> Scrollbar thumb color (default: #ccc)

enterShow -> Whether to show the scrollbar when the mouse enters the wrapper (default: true)

hasY -> Whether to enable the Y-axis scrollbar (default: true)

hasX -> Whether to enable the X-axis scrollbar (default: false)

7. If you need to change the data in the scrolling layer after creating an instance, call the setSize method afterward to recalculate the scrollbar height.

oBtn.onclick = function () {
    var oP = document.createElement("p");
    oP.innerHTML = '123123123';
    oScroll.appendChild(oP);
 
    oMyBar1.setSize();
}

8、Note: If the scrolling container's ancestor element has display:none when the instance is created, the scrollbar height will be 0. Therefore, call the setSize method once the element becomes visible to recalculate the height.