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?

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

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.

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.

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

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?

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?

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.

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.

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.

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

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.

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

Anyway...this not works with mobile devices

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

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

Adding dragscroll to body when current element is not scrolling anymore

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?

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.

example: http://antoniogagliano.net/

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

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.

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.

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?

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

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?

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.

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

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.

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 ;)

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 } })

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);

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

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

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

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?

Just try on an iPhone

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.

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.

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?

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?

Hi. How to use it in Angular project? Thanks

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?

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
);

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.

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

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