https://github.com/azerafati/scroll-drag

Scroll using mouse drag
https://github.com/azerafati/scroll-drag

angular drag scroll

Last synced: 30 days ago
JSON representation

Scroll using mouse drag

• Host: GitHub
• URL: https://github.com/azerafati/scroll-drag
• Owner: azerafati
• License: mit
• Created: 2022-08-25T14:25:28.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-01-29T19:04:15.000Z (over 1 year ago)
• Last Synced: 2026-03-28T00:37:12.466Z (about 1 month ago)
• Topics: angular, drag, scroll
• Language: TypeScript
• Homepage: http://azerafati.com/scroll-drag/
• Size: 1020 KB
• Stars: 4
• Watchers: 1
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Angular Scroll Drag Directive

[![Build Status](https://github.com/azerafati/scroll-drag/actions/workflows/test.yml/badge.svg)](https://github.com/azerafati/scroll-drag/actions)

[![npm version](https://img.shields.io/npm/v/@azerafati/ngx-scroll-drag.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen.svg)](https://www.npmjs.com/package/@azerafati/ngx-scroll-drag)

[![Issues](https://img.shields.io/github/issues/azerafati/scroll-drag.svg)](https://github.com/azerafati/scroll-drag/issues)

[![Issues](https://img.shields.io/npm/dt/@azerafati/ngx-scroll-drag.svg)](https://www.npmjs.com/package/@azerafati/ngx-scroll-drag)

[![Issues](https://img.shields.io/codecov/c/github/azerafati/ngx-scroll-drag/main.svg?maxAge=43200)](https://www.npmjs.com/package/@azerafati/ngx-scroll-drag)

[![License](https://img.shields.io/github/license/azerafati/scroll-drag.svg)](#license)

Scroll using mouse drag

## Getting started

```

npm i @azerafati/ngx-scroll-drag

```

* Add `ngxScrollDrag` on a scrolling element, now that element can also be scrolled by a mouse drag.

* The ScrollDrag Element can have a shadow if you add `[scrollShadow]="true"` indicating the out of view content. This uses background gradients which is perfect in most cases, unless the scrolling content is using complex z-index which might render on top of the shadow.

* If you want to show scroll shadows and have z-index issues, wrap your scrolling element with `` tag.

[**See the Demo**](https://azerafati.com/scroll-drag/)

## Running unit tests

Run `npm test` to execute the unit tests via [Jest](https://jestjs.io/).

----

## Development server

Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. 

## Build

Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.