Loading, please wait...

ARTDESIGN SCROLL BAR

SETTINGS

Attributes

data-plugin-ad-scroll-bar="ad-scroll-bar"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-scroll-bar="ad-scroll-bar">
    //Content
</div>

data-ad-scroll-bar-options="Blue, Classic"

This attribute overwrites the settings of the plugin only for the specific element
<div data-plugin-ad-scroll-bar="ad-scroll-bar" data-ad-scroll-bar-options="Blue, Classic">
    //Content
</div>

Public Methods

Disable / Enable Horizontal Scroll

<div class="ArtDesign">
    <div data-plugin-ad-scroll-bar="ad-scroll-bar" id="DisableEnableHorizontalScroll">
        //Content
    </div>
</div>

<script type="text/javascript">
ScrollBar = $(".ArtDesign").ArtDesignScrollBar();
function EnableHorizontalScroll() {
    ScrollBar.EnableHorizontalScroll("#DisableEnableHorizontalScroll");
}
function DisableHorizontalScroll() {
    ScrollBar.DisableHorizontalScroll("#DisableEnableHorizontalScroll");
}
</script>

Disable / Enable Vertical Scroll

<div class="ArtDesign">
    <div data-plugin-ad-scroll-bar="ad-scroll-bar" id="DisableEnableVerticalScroll">
        //Content
    </div>
</div>

<script type="text/javascript">
ScrollBar = $(".ArtDesign").ArtDesignScrollBar();
function EnableVerticalScroll() {
    ScrollBar.EnableVerticalScroll("#DisableEnableVerticalScroll");
}
function DisableVerticalScroll() {
    ScrollBar.DisableVerticalScroll("#DisableEnableVerticalScroll");
}
</script>

Scroll To - Horizontal and Vertical

<div class="ArtDesign">
    <div data-plugin-ad-scroll-bar="ad-scroll-bar" id="ScrollTo">
        //Content
    </div>
</div>

<script type="text/javascript">
ScrollBar = $(".ArtDesign").ArtDesignScrollBar();
function ScrollToHorizontalLeft() {
    ScrollBar.ScrollToHorizontal("#ScrollTo", "Left", 1);
}
function ScrollToHorizontal200() {
    ScrollBar.ScrollToHorizontal("#ScrollTo", 200, 1);
}
function ScrollToHorizontalRight() {
    ScrollBar.ScrollToHorizontal("#ScrollTo", "Right", 1);
}
function ScrollToVerticalTop() {
    ScrollBar.ScrollToVertical("#ScrollTo", "Top", 1);
}
function ScrollToVertical200() {
    ScrollBar.ScrollToVertical("#ScrollTo", 200, 1);
}
function ScrollToVerticalBottom() {
    ScrollBar.ScrollToVertical("#ScrollTo", "Bottom", 1);
}
</script>

Get Position - Horizontal and Vertical

<div class="ArtDesign">
    <div data-plugin-ad-scroll-bar="ad-scroll-bar" id="GetPosition">
        //Content
    </div>
</div>

<script type="text/javascript">
ScrollBar = $(".ArtDesign").ArtDesignScrollBar();
function GetContentHorizontalPosition() {
    var HorizontalPosition = ScrollBar.GetContentHorizontalPosition("#GetPosition");
    console.log(parseFloat(HorizontalPosition));
}
function GetContentVerticalPosition() {
    var VerticalPosition = ScrollBar.GetContentVerticalPosition("#GetPosition");
    console.log(parseFloat(VerticalPosition));
}
</script>

Destroy

<script type="text/javascript">
    var ScrollBar = $(".ArtDesign").ArtDesignScrollBar();
    ScrollBar.Destroy();
</script>

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "Scr_" // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "Scr_"
    },
    Global: { // Global settings of the element
        ZIndex: 999999, // It specifies the stack order of an elements; Must be integer or string (auto, initial, inherit); By default: 999999
        ScrollHorizontal: false, // If it is true it sets a horizontal scroll; Must be boolean; By default: false
        ScrollVertical: true, // If it is true it sets a vertical scroll; Must be boolean; By default: true
        FadeAnimation: 0.6, // Set the fade animation speed of the button; Must be integer or decimal; By default: 0.6
        Animation: 0.8, // Set the animation speed of the element; Must be integer or decimal; By default: 0.8
        MouseWheelSpeed: 20, // Set the mouse wheel speed of the element; Must be integer or decimal; By default: 20
        Draggable: false, // If it is true it allows dragging; Must be boolean; By default: false
        DraggableType: "top", // Specifies the draggable type; Must be string; By default: "top"
        DragClickElements: false, // If it is true it allows dragging click elements; Must be boolean; By default: false
        DragEdgeResistance: 0.95, // Specifies the drag edge resistance; Must be integer or decimal; By default: 0.95
        DragCursor: "move" // Specifies the drag cursor; Must be string; By default: "move"
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    ScrollBars: { // Settings for Scroll Bars
        Content: { // Settings for the content
            "paddingRight": 20, // Set the right padding of the element; Must be integer; By default: 20
            "paddingBottom": 0 // Set the right bottom of the element; Must be integer; By default: 0
        },
        Horizontal: { // Settings for horizontal scroll bar
            ScrollBarHorizontal: {
                Height: 20, // Set the height of the element; Must be integer; By default: 20
                CSS: { // Set all settings as a CSS block, can be added more setting such as attributes
                    "backgroundColor": "#FFFFFF",
                    "height": "20px",
                    "position": "absolute",
                    "bottom": "0px",
                    "left": "0px"
                }
            },
            ScrollBarHorizontalArea: { // Settings for scroll bar horizontal area
                CSS: { // Set all settings as a CSS block, can be added more setting such as attributes
                    "height": "3px",
                    "width": "100%",
                    "marginTop": "9px",
                    "background": "#719AC1"
                }
            },
            ScrollBarHorizontalDrag: { // Settings for scroll bar horizontal drag
                Animation: {
                    InActive: {
                        "backgroundColor": "#ADC0D2"
                    },
                    Active: {
                        "backgroundColor": "#6488AA"
                    }
                },
                CSS: { // Set all settings as a CSS block, can be added more setting such as attributes
                    "position": "absolute",
                    "height": "5px",
                    "marginTop": "-1px",
                    "background": "#719AC1"
                }
            }
        },
        Vertical: { // Settings for vertical scroll bar
            ScrollBarVertical: {
                Width: 20, // Set the width of the element; Must be integer; By default: 20
                CSS: { // Set all settings as a CSS block, can be added more setting such as attributes
                    "backgroundColor": "#FFFFFF",
                    "width": "20px",
                    "position": "absolute",
                    "top": "0px",
                    "right": "0px"
                }
            },
            ScrollBarVerticalArea: { // Settings for vertical scroll bar area
                CSS: { // Set all settings as a CSS block, can be added more setting such as attributes
                    "width": "3px",
                    "height": "100%",
                    "marginLeft": "8px",
                    "background": "#719AC1"
                }
            },
            ScrollBarVerticalDrag: { // Settings for vertical scroll bar drag
                Animation: {
                    InActive: {
                        "backgroundColor": "#ADC0D2"
                    },
                    Active: {
                        "backgroundColor": "#6488AA"
                    }
                },
                CSS: { // Set all settings as a CSS block, can be added more setting such as attributes
                    "position": "absolute",
                    "width": "5px",
                    "marginLeft": "-1px",
                    "background": "#719AC1"
                }
            }
        },
        FixBottomRight: { // Settings for fix bottom right
            Use: true,
            CSS: {
                "backgroundColor": "#FFFFFF"
            }
        }
    }
</script>