jQuery Disable Scroll Plugin

中文 | English

This plugin allows you to disable page scrolling without hiding the scrollbars.

Dependencies

You need to have jQuery installed. Version 1.7.0 or higher is required.

Installation

NPM

Install dependencies

npm install jquery

Install the plugin

npm install jquery-disable-scroll-plugin

Include

<script src="path/to/node_modules/jquery/dist/jquery.min.js"></script>
<script src="path/to/node_modules/jquery-disable-scroll-plugin/jquery.disable-scroll.min.js"></script>

CDN

unpkg

<script src="https://unpkg.com/jquery@latest/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jquery-disable-scroll-plugin@latest/jquery.disable-scroll.min.js"></script>

Zhihu Mirror unpkg

<script src="https://unpkg.zhimg.com/jquery@latest/dist/jquery.min.js"></script>
<script src="https://unpkg.zhimg.com/jquery-disable-scroll-plugin@latest/jquery.disable-scroll.min.js"></script>

jsdelivr

<script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-disable-scroll-plugin@latest/jquery.disable-scroll.min.js"></script>

Local

Download jQuery

https://jquery.com/download/

Download the plugin

https://github.com/gxlydlyf/jquery-disable-scroll-plugin/releases/latest

Include

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.disable-scroll.min.js"></script>

Usage

For parameter details, refer to here.

var $element = $('#element'); // Element to control

Disable/Enable Scroll

x and y

// Enable scrolling, choose one of the following methods
$element.EnableScroll();
$element.EnableScroll("xy");
$element.EnableScroll("all");
$element.ControlScroll(true);
$element.ControlScroll(true, "xy");
$element.ControlScroll(true, "all");

// Disable scrolling, choose one of the following methods
$element.DisableScroll();
$element.DisableScroll("xy");
$element.DisableScroll("all");
$element.ControlScroll(false);
$element.ControlScroll(false, "xy");
$element.ControlScroll(false, "all");

x or y

var direction;
direction = "x"; // When setting x
direction = "y"; // When setting y

// Enable scrolling, choose one of the following methods
$element.EnableScroll(direction);
$element.ControlScroll(true, direction);

// Disable scrolling, choose one of the following methods
$element.DisableScroll(direction);
$element.ControlScroll(false, direction);

Application of IDs

Scrolling will be enabled when all IDs are removed.

$element.ControlScroll(false, "x", "id_name"); // Disable x-axis with ID "id_name"

// Disable x-axis with IDs 'id1' and 'id2', disable y-axis with ID 'id1'
$element.DisableScroll({
    x: ['id1', 'id2'],
    y: 'id1'
});
// Equivalent to
$element.ControlScroll(false, {
    x: ['id1', 'id2'],
    y: 'id1'
});

// Disable both axes with IDs 'id1' and 'id2'
$element.DisableScroll("xy", ['id1', 'id2']);

Get all IDs

$element.disableScrollId(); // Returns an object

{
  "x": {
    "id1": true,
    "id2": true
  },
  "y": {
    "id1": true,
    "id": true
  }
}

Parameter Rewriting

$('#div').ControlScroll(
    {
        status: false,
        direction: 'x',
        id: 'id'
    }
); // Disable x-axis with ID 'id'
$('#div').DisableScroll(
    {
        status: false,
        direction: 'y',
        id: 'id'
    }
); // Disable y-axis with ID 'id'
$('#div').DisableScroll(
    {
        status: true,
        direction: 'y',
        id: 'id'
    }
); // Enable y-axis, remove ID 'id'

Get Disable Status

$element.disableScrollStatus(); // Returns an object

False indicates disabled status, true indicates enabled status.

{
  "x": false,
  "y": true
}

Modify Defaults

View Default Configuration

jQuery.DisableScroll.defaults

{
  "direction": "xy",
  "id": "default",
  "status": "disable"
}

Modify

jQuery.DisableScroll.direction = "x";
jQuery.DisableScroll.id = "id";
jQuery.DisableScroll.status = "enable"; // Applicable to ControlScroll, can also be a boolean value, true for default enabled, false for default disabled

Function Name Conflict

Description

The noConflict function is used to handle conflicts with plugin names, ensuring that the plugin can function properly in different environments.

Parameters

• type (String): Optional parameter specifying the handling type, with possible values 'fn', 'fn-ext', 'fn-default', 'method'. If not provided or out of range, defaults to 'method'.

Returns

• If the handling type is 'method', it returns the plugin object.
• If the handling type is 'fn', 'fn-ext', 'fn-default', it returns an object containing the disable, control, enable methods.
• If the parameter is out of range, it returns false.

Examples

Example with handling type 'method'

jQuery.NewName = jQuery.DisableScroll.noConflict('method');
// jQuery.NewName will now be equivalent to the original jQuery.DisableScroll

Example with handling type 'fn'

Function names include

{
  "fn": [
    "controlScroll",
    "ctrlScroll",
    "disableScroll",
    "offScroll",
    "enableScroll",
    "onScroll",
    "ControlScroll",
    "Control_scroll",
    "control_scroll",
    "controlscroll",
    "CtrlScroll",
    "ctrl_scroll",
    "ctrlscroll",
    "DisableScroll",
    "Disable_scroll",
    "disable_scroll",
    "disablescroll",
    "OffScroll",
    "off_scroll",
    "offscroll",
    "enableScroll",
    "enable_scroll",
    "enable_scroll",
    "enablescroll",
    "OnScroll",
    "on_scroll",
    "onscroll"
  ]
}

var names = jQuery.DisableScroll.noConflict('fn');
// Assign
jQuery.fn.newControl = names.control;
jQuery.fn.newDisable = names.disable;
jQuery.fn.newEnable = names.enable;
// Usage
$element.newControl(); // Equivalent to $element.ControlScroll();
$element.newDisable(); // Equivalent to $element.DisableScroll();
$element.newEnable(); // Equivalent to $element.EnableScroll();

Example with handling type 'fn-ext'

Similar to handling type 'fn', Function names include

{
  "fn-ext": [
    "ControlScroll",
    "Control_scroll",
    "control_scroll",
    "controlscroll",
    "CtrlScroll",
    "ctrl_scroll",
    "ctrlscroll",
    "DisableScroll",
    "Disable_scroll",
    "disable_scroll",
    "disablescroll",
    "OffScroll",
    "off_scroll",
    "offscroll",
    "enableScroll",
    "enable_scroll",
    "enable_scroll",
    "enablescroll",
    "OnScroll",
    "on_scroll",
    "onscroll"
  ]
}

Example with handling type 'fn-default'

Similar to handling type 'fn', Function names include

{
  "fn-default": [
    "controlScroll",
    "ctrlScroll",
    "disableScroll",
    "offScroll",
    "enableScroll",
    "onScroll"
  ]
}

Aliases

| Original Name | Aliases | |:-------------:|:-----------------------------------------------------------------------------------------------------------------------------------------:| | ControlScroll | ctrlScroolCtrlScrollctrlscrollctrl_scrollCtrl_scrollcontrolScrollcontrol_scrollControl_scrollControlScrollcontrolscroll | | DisableScroll | offScroolOffScrolloffscrolloff_scrollOff_scrolldisableScrolldisable_scrollDisable_scrollDisableScrolldisablescroll | | EnableScroll | onScrollOnScrolllonscrolllon_scrolllOn_scrolllenableScrolllenable_scrolllEnable_scrolllEnableScrolllenablescroll |

Demo

After downloading the project, open the index.html file to see the effect or View it online here

Compatibility

The plugin is theoretically compatible with all browsers.

discuss

Visit the forum

Suggestions and Issues

Feel free to raise any suggestions or issues on GitHub Issues