asvd/dragscroll

micro library for drag-n-drop scrolling style

dragscroll's Issues

Allow select text when shift key pressed

Excellent Library - Thanks!

Our users want to be able to select text within the dragscroll area. So I modified your code to verify the user pressed the left-button, and they did NOT have the shift key pressed. This works perfect in Chrome, but IE and Firefox have trouble selecting text when I press the shift key: These browsers ignore where my drag started, so they assume I am selecting from the start of the webpage to the current cursor position. Here is a snippet of the change I made:

...
(cont = el.container || el)[addEventListener](
   mousedown,
   cont.md = function(e) {
    if (
      e.button === 0
      &&
      !e.shiftKey
      &&
      (!el.hasAttribute('nochilddrag') ||
      _document.elementFromPoint(
      e.pageX, e.pageY) == cont )
    ) {
      pushed = 1;
      ...

As I say, works perfectly in Chrome. I am thinking I need to add some kind of javascript to onmousedown which says, "range selection starts here". I am not sure how to do this.

Here is a jsfiddle to see it in action

Not working in an element with Visible overflow

well,
sorry if its a dumb thing/question. im a noob. so im triyn to use the dragscroll with "overflow:visible" element and dosent work.. when i use "overflow: auto" works perfectly. but in this case i really need to use it with visible overflow.

What im missing?

How can I use this package in React project? Thank you

I tried to import this package like that import dragscroll from 'dragscroll';, and tried to to use it

<div className='dragscroll'>
     Blabla
</div>

However, it is not working. I am new to React, so I don't know what I am doing wrong. Thank you

How to scroll one element by dragging within another?

I have a small touchscreen device and a dedicated 'scrollbar' region on the right.

I am not familiar enough with the javascript to figure out how to specify that the main window shouldn't be draggable, but it should scroll if I drag within the scrollbar area on the right.

Is there a way to do this?

Issue when run on IE

When run this demo for this pluggin on IE, i found problem when use scroll horizontal bar : Error occur after release mouse, and positon of horizontal bar move wrong position.

Drag by a specific amount

Great tool. :-) Would you consider adding a parameter or setting to allow scrolling by a specific amount? The area I'm scrolling has columns of info and I'd like to "snap to column", that is, force scrolling by whole columns, not fractions of a column. My columns are 240px, so I was doing this like $(".scroller").scrollLeft(parseInt(this.scrollLeft / 240) * 240);. This no longer works when I add .dragscroll.

Input element not working

Hi,
Any way can exclude action elements such as input fields, buttons, etc...?
Will be great if implement options or api to use.

Adding dragscroll to body when current element is not scrolling anymore

Adding dragscroll to body when current element is not scrolling anymore

Not working with SVG-Files using object or iframe tag.

I used dragscroll with svg-Files and there are some annoying issues:

• It's just working with Firefox. I tested it also with Edge and Opera and it didn't work at all.
• With Firefox I couldn't drag on the image itself and always needed to click a little bit outside of the graphic.
• I'm using Vue.js and it seems buggy when I change the view with Vue-Router.

Scrolling an element with the entire page

This is very useful. Works great. But I'm trying to do something and it ends up with an element over the element I want to be scrolled, and the element over it is disabling scrolling for the one under.

Can anyone help me to make it so when I drag on the entire HTML page, a specific element to be scrolled?

Prevent click propagation on drag and drop

I was wondering if anyone had an issue with click event being fired after drag and drop.

My container is a huge list of images wrapped with links to a dedicated page.

Sometimes when the drap and drop is initiated on top of the image, the click event gets fired when releasing the mouse.

Is there an easy way to prevent this from happening?

I was thinking about adding a class no-click to the container then adding a click eventListener to all children which will check if the parent has the class no-click and then stop the propagation of the event.

scrolling on swipe

I'm using dragscroll and scroll working only on drag and stops when mouse up.Is it possible to scroll on swipe?
something like swipe in this

Momentum scroll

Did you plan on adding a momentum to the scroll, as an option of course?

Mobile is a no-go, breaks <select> boxes

Just try on an iPhone

Disable drag-scrolling for specific child element

nochilddrag works great, but it affects every child element, and leaves just an empty space between them working.
Is there a way to exclude just a specific element from the grabbing area? It would be useful for inputs or other interactive elements.

Add on drag event?

It would be great to have a on('dragstart', function(){..}) event so when user is dragging you can change cursor pointer to grabbing for example.

Dynamically re-activate the dragscroll

Searching for an answer I read this issue : #4
So what I am trying to do is reactivate the dragscoll after using reset()

I tried to rename the className, but it didn't work - after resetting it I can't find a way to put it back up. Maybe I am missing something....

if (isDragged) {
     document.body.className = "";
     dragscroll.reset()
} else {
      document.body.className = "dragscroll";
}`

Great library btw ;)

Center mode

Hi,
im making Hidden Object Game using yours script and i need help. How to setup image on start in center position? Not top left.

And how to disabe refresh page when on mobile you scroll on bottom container?

@edit
This is working for me

var divWidth = document.getElementById('mydiv').offsetWidth;
var divHeight = document.getElementById('mydiv').offsetHeight;
var widthImg = 2000;
var heightImg = 666;

$('#mydiv').scrollLeft((widthImg-divWidth)/2);
$('#mydiv').scrollTop((heightImg-divHeight)/2);

Doesn't work when scroll snapping enabled

Scroll Snapping spec it's quite a new spec but has been around in some form for a while now.

If you have e.g. scroll-snap-type: x mandatory; it will cause the drag scroll to not work at all

Proposed solution: If you dragging the content, it would make sense to disable the scroll snapping temporarily, then re-enable after finished dragging and allow the browser to snap to the desired position.

Verticall scrolling doesnot work while in a container with horizontal scrolling is encountered

I have two containers : one is parent which scrolls vertically and inside parent there is another horizontal scrolling div. when I reach child container with horizontal scrolling vertical scrolling does not work.

Not scrolling if it use <iframe> tag

When I use iframe to load another page that originally work, it is not scrolling. Is there a way to achieve it?

Enable text select

Thank you asvd for the script.
Is there a way to select text with Dragscroll enabled ?

Scroll with right mouse button only

I want to be able to only scroll using right mouse button (or double touch on mobile) but I'm not able to find how to configure this.

How would I achieve this? Or is this not supported?

How to add a "Reset" button

Hi there,

I've implemented "Zoom out" / "Zoom in" buttons with dragscroll modeled off of [this example] (https://stackoverflow.com/questions/47635341/zooming-in-out-an-image-by-clicking-zoom-buttons-javascript) and I'd like to add a third "Reset" button that brings the image back to initial scale and position.

Any ideas on how to accomplish this?

Reinit dragscroll

Hey,

I have some elements that I create with jQuery and since they are created after the page loads, ".dragscroll" doesn't work. Is there a way to reinit the elements?

can you make this a chrome extension or a windows.exe

Hey developer I really like drag and scroll type of scrolling plz can you make this available on windows 10 too means an .exe would be suffice or a minimum a chrome extension plz

Overflow-x

If you want scroll horizontal then fix event mousemove :D

_window[addEventListener](
    mousemove,
    cont.mm = function (e) {
        if (pushed) {
            (scroller = el.scroller || el).scrollLeft -=
                 (-lastClientX + (lastClientX = e.clientX));
            scroller.scrollTop -=
                 (-lastClientY + (lastClientY = e.clientY) + (1 * $(el).css('padding-top').replace('px','')));
        }
    }, 0
);

Issues with dragscroll, Linux Ubuntu, and Electron?

So, running Electron 1.3.3 on Ubuntu, dragscroll fails to register while it works just fine on OSX. A very strange occurrence, admittedly, since it works fine with Chrome on Ubuntu (Electron is Chromium based). My code is as follows...

    <div class="mainWindow dragscroll" id="viewer">
        <div id="innerWindow">
            <img id="viewImgOne" draggable="false"/>
            <img id="viewImgTwo" draggable="false"/>
            <div id="bgLoader" class="hidden"></div>
            <div id="loader" class="loader hidden">Loading...</div>
        </div>
    </div>

.mainWindow {
  width: 100%;
  margin-top: 56px;
  overflow: auto;
  img {
    float: left;
    width: 50%;
  }
}

Images load into the two image elements, and the innerWindow is resized accordingly based on image heights. Any suggestions?

Dynamically removing dragscroll from an element

Great library, thanks. I'm trying to dynamically enable/disable dragscroll for an element. Enabling it works fine - I add the 'dragscroll' class and then call dragscroll.reset(). However, removing the class and again calling dragscroll.reset() does not remove the event listeners - the element is still draggable. Any suggestions on how to do this?

Strange behavior on Internet Explorer

When scrolling inside a box using the scroll bars, drag-scrolling would still continue after leaving cursor from the scroll bar on Internet Explorer 11. There are no problems when drag-n-drop in the area.

Thanks.

Range slider (<input type="range" ..>) not working as a child of 'dragscroll'

Hi,

Seems like a range slider placed within dragscroll is not working.

E.g. for the code below the slider just freezes and you can't change the value:

<div class="dragscroll">
     <div class="slidecontainer">
        <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
     </div>                              
 </div>

Thank you.

Publish to NPM

A lot of people use NPM for their frontend package management these days. It'd be handy if this was published as an NPM module.

Dragscroll on mobile not working

I am using the dragscroll plugin to be able to explore a bracket that is too wide to fit in its container. I am using the jquery-bracket plugin to display the bracket.

Here is a working example.

The dragscroll works on desktop perfectly, but when it comes to mobile it just does not scroll at all, try for yourselves. I have been trying to figure out why for way too long, so hopefully somebody around here can help.

Reinit method

Hello!
I try to use dragscroll with react-based application.
I have multiple routes and when dragscroll-allowed route was mounted (directly visited), dragscroll work perfectly.
But, when other route mouted before dragscroll-allowed route - dragscroll not worked.
What I do wrong or how I can reinit dragscroll?

Drag hangs after scrolling in IE 11

When I use dragscroll in IE, take the scrollbar to scroll and release mousebutton afterwards, dragscroll is still active. This can be reproduces in the provided example http://asvd.github.io/dragscroll/:

• take horizontal or vertical scrollbar and drag it
• release mousebutton
• hover for example "the earth"
• dragscroll is still active

The problem is, that mouseup-event is not been triggered in this case.

Do you have any suggestions to solve this problem?

Best regards,

Andi

Add indicator during scroll

Hi Folks,

since I need to be able to click items within the scroll area when this is not in "scroll mode" I added an addidtional class to the dragscroll-element. So I can query this class to prevent clicking these items during scroll. Perhaps anyone would like to use this too:

Snippet:

after Line 61:

el.classList.remove("dragging");

after Line 70:

el.classList.add("dragging");

Handle the click with jQuery:

$(".item").on("mouseup", function() { if(!$(this).parents(".scroll-area").hasClass("dragging")) { // do something } })

Angular usage

Hi. How to use it in Angular project? Thanks

Make text selectable if no scrollbar after .reset()

Consider such case:

User opens page at browser window which is 50% of screen width.
Page contains full-width table (100% page width) but it's content not fit horizontally so horizontal scrollbar appears and dragscroll plugin inits.
User reveals browser window to fullscreen, table successfully fits page and hasn't horizontall scrollbar anymore.
Since table fits now there are no sense to use dragscroll so I do dragscroll.reset() (after resize ends) hoping that all event listeners will be removed and user will be able to select text. But it doesn't.
Seems that events are not removed so user not able to select text.

Not scrolling if div has a table

I have a table inside the div and dragscroll does not work.
I am loading the dragscroll.js using require JS

Drag either vertically or horizontally only.

Is there a setting to only drag across a set axis? In this case I only want it to drag horizontally.

I have a subnav with padding and margin that i want to drag horizontally, but it also nudges around vertically which is not desired.

dragscoll body reacts to popup scroll

First of my complements for this great and easy to use librairy.

In my case I use it for "dragging" the body vertical and an timetable horizontally. Works perfect! Even on mobile.

Is there any way to temp disable the dragscroll on the body while scrolling in a popup div?

doesn't work with html5 - <!DOCTYPE html>

Works fine with just at the top of a file.
No longer works when using instead.

Demo here:
http://100wires.com/dragscroll/index1.html
http://100wires.com/dragscroll/index3.html

The only difference between the two is the first line, or

Can I use dragscroll only with middle click ?

Hi !

I try to use the dragscroll but only when the user use the middle click of his mouse. I want to prevent the scroll with the left and right click, anny idea of how ?

Thanks

Not running on mobile

Don't know if it's supposed to work even on mobile

Anyway...this not works with mobile devices

iOS support

Any way to add iOS support to this? Or at least disable it on iOS?

it doesn't works on firefox when applied to body

example: http://antoniogagliano.net/