Hi, I am doing a Horizontal scroll, but the last item (the 30th) 's right red shadow cannot show on the screen

I tried to add padding/ margin/ border, still does not work.

sandbox: https://codesandbox.io/s/react-indiana-drag-scroll-default-forked-1xcxt

Also posted in
https://stackoverflow.com/questions/64661956/react-indiana-drag-scroll-the-shadow-of-the-last-item-not-shown

Hi,

thanks again for the great component. I have some issues to get onScroll work with mouse wheel.

<ScrollContainer className={modalContentClass}
                      horizontal={false}
                      vertical={true}
                      onScroll={this.handleScroll}>
                      {...}
</ScrollContainer>

This workaround works for me:

                <ScrollContainer className={modalContentClass}
                    horizontal={false}
                    vertical={true}
                    ref={(node: any) => {
                        if (node && node.container) {
                            // workaround container will not expose scroll with wheel
                            node.container.current.onscroll = this.handleScroll;
                        }
                    }}>
                    {this.getContent()}
                </ScrollContainer>

Testet on:
Firefox 69.0.2/Linux
Chromium 77.0.3865.90/Linux
with react 16.4.2 & react-indiana-drag-scroll 1.3.0

Thanks & Best Regards

is not taken effect onScroll on wheel my mouse ?

stopPropagation missing

Looking at the README:

onScroll | Function | Invoked when user scrolling container |  
onEndScroll | Function | Invoked when user ends scrolling container |  
onStartScroll | Function | Invoked when user starts scrolling container |

But when I set the initial scroll using the domNode.scrollTo(...); the start/end scroll callbacks are invoked.

Is there any way we can supress this easily?

I've attempted to do this within my app with isInitialized flags etc, but it's quite unreliable. I believe since you know if the user touched/moused etc, this may be easier to handle in the component.

Thanks.

Hello, I have this issue which I recreated here:
https://codesandbox.io/s/eloquent-bouman-te4jj9?file=/src/App.js
https://te4jj9.csb.app/

The issue is on touch devices when I try to scroll vertically from the

Handler onEndScroll fires on any click on the page :(

Hi,
first of all thank you for your great component.
In our project we currently create an "About" page with a list of all used components. The list is generated by using package.json. Additionally we grab LICENSE(.md or .txt) file to display the license for the component.

You may find this useful:
https://help.github.com/en/github/creating-cloning-and-archiving-repositories/licensing-a-repository

The template would be:

Copyright (c) <year> <copyright holders>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 

Thanks & Best Regards

it's only available when dragging via the onScroll

const onScroll = () => {
    if (scrollContainerRef.current) {
      console.log(scrollContainerRef.current);
    }
};

I need the offset regardless of how the window is scrolled, is this possible?

Hi is there a way to reset the scroll bar position? to the beginning?

I have a pagination element outside of the scroll container and when I click the page, the data rendered inside the scroll container changes, but the scrollbar is e.g. somewhere in the middle of this horizontal container

Related code -> https://github.com/adnjoo/Movie-App/blob/main/client/src/components/pages/Home.tsx#L22

not sure if there's a prop to pass to reset the scroll position?

Exactly what I needed :)

Hello,

I tried to use the plugin like so :

<ScrollContainer className="scroll-container" vertical={true} horizontal={true}> <MyImage /> </ScrollContainer>

I am able to scroll horizontally by dragging but I can't move vertically at all. I don't know what I should do.

Thanks

Hi again! If a parent has style of direction: rtl on Edge the dragging movement becomes inverse, here check this in Edge: https://6vfmu.csb.app/ (editor view)

<ScrollContainer className="container" nativeMobileScroll={true} onClick={(...args) => { console.log('onClick', args) }}>

                        <Form>

                            <Row>

                                <Col>
                                    <FormGroup>
                                        <Label for="exampleEmail">Role Adı</Label>


                                        <Input
                                            type="text"
                                            name="roleName"
                                            id="roleName"
                                            placeholder="Role Adı Belirleyiniz!"
                                            value={this.state.roleName}
                                            onChange={this.setOnChange}
                                        />


                                    </FormGroup>
                                </Col>

                            </Row>

                            <Button block size="lg" onClick={this.onSubmit}  >Rolü Oluştur</Button>
                        </Form>

                    </div>
                </ScrollContainer>

In version 2.0.0 (and later) the parameters of the onEndScroll function have been replaced with ScrollEvent, which contains a single external field. So the opportunity to get scrolling offsets was lost.

Hey,
I wanna use react-scroll-to (NPM) to change the scroll X or Y
but it doesnot work
plez help me thx

if hideScrollbars is true, then you can no longer scroll horizontally with a trackpad or wheel.

If so, it's probably worth leaving a note in documentation

As a side note, perhaps it's possible to consider implementing

  &::-webkit-scrollbar {
    display: none;
  }

instead?

I have no issue but just wanted express my gratitude to you from creating this library

I had a design that required both drag and scrollbars, and was able to prototype it with react-indiana-drag-scroll - this has saved me considerable amount of time

thank you!

Hi, I am student developer.
I'm using NextJS now, and make long div and it is only scrolling horizontally.
I works well, but chrome throw error below.

Unable to preventDefault inside passive event listener due to target being treated as passive.

How can i fix this error?

I dont use event listener without this library..
It is because of Nextjs?

Hello,

Thanks for the library, it's quite cool!

I'd like to add the wheel of the mouse to activate the drag and I've seen in your docs that you have the property buttons which receives an array to activate the drag scroll. The thing is that I don't really know which number belongs to the wheel or probably I'm getting wrong the button's property, if so. Is there a way to activate it with your API?

Thanks again and have a wonderful day!

I planned to use this great tool for creating a carousel. I didn't want a continous scroll but rather the scrolling to snap to the items with scroll-snap-type: x mandatory. This makes the scrolling area not scrollable at all.

I would like to be able to change the cursor from 'grab' to 'grabbing',

So I can use cursor 'grab' on hover and cursor 'grabbing' when mouse is down.

Currently the class indiana-dragging is setting the cursor with !important so I cannot overrule this functionality

i have input in container and i can't change value input. it seems container was block change input. i need a solution, thank everyone
i using google translate

Nice library brow!! Thanks very much!

But you could add more two new features:

1. Horizontal scrolling with mouse's scroll.

And (2) set element type in component. Example:

<DraggableScroll element="ul" >
    {list.map(({ name }, i) => (
        <li key={i} >{name}</li>
    ))}
</DraggableScroll>

On render, the scroll container isn't scrolling when using the touchpad (on MacOS). Fine on mobile with touch, and grabbing to scroll with mouse drag. This must be a known issue, with perhaps a simple fix? Thanks

Popovers inside ScrollContainer, don't get dismissed when users click off them.
If users click inside the scroll component to open another popover or try to scroll the div, the active/previous popover does not disappear. It seems like onClick event doesn't get fired or something. How can I achieve this? demo code

 handleOnClick = (e) => {
    console.log("clicked"); // no output to console
  };
<ScrollContainer
          className="scroll-container attendance-scroller test"
          hideScrollbars={false}
          nativeMobileScroll={true}
          onClick={this.handleOnClick}
        >
      ...
        </ScrollContainer>

Hey guys - is it possible to include some level of animated inertia to the drag? Also any possibility of including scroll capture in the element as well?

I theScrollContainer component fails with

Its instance type 'ScrollContainer' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("../node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.

I have a simple implementation

import React from 'react'
import ScrollContainer from 'react-indiana-drag-scroll'

export const Foo = () => {
    return (
      <ScrollContainer
         className='scroll-container'
         horizontal={true}
         vertical={true}
      >
        <h1>Test</h1>
    </ScrollContainer>
   )
})

Hey, i have problem, when there is input inside ScrollContainer.... and i am clicking inside this container (outside the input)... input event onBlur isn't called... Any workaround for this ? Or incoming fix? Thanks !

If the children are a or img tags in Firefox, they literally get dragged over the browser. It's a bit hard to explain, open this with Firefox: https://gluye.csb.app/ (editor view).

Some library or user created components will create one or more elements to wrap long text content in it, such as Grsmto/simplebar, I call this "higher order element".
In this example, the accuracy scrollable element is under div[data-simplebar] > div.simplebar-wrapper > div.simplebar-mask > div.simplebar-offset > div.simplebar-content-wrapper, not the first level div[data-simplebar] which will be recognized by react-indiana-drag-scroll as store in this.container.current ref.

Hi again again 😄. Default swiping on mobile scrolls the whole page vertically, right? So if I have a horizontal ScrollContainer in my page and start touch on the container and swipe let's say up, it doesn't work. I also tried vertical={false}. Should I use the native browser scroll for mobile?

https://qyhqc.csb.app/

Hi, great library and everything works fine in Safari and Chrome on the Iphone, but when I open webpage on Android (using Chrome) I cannot zoom this page, like sometimes I can, but most of the times no. I've commented ScrollContainer and everything works just fine, maybe someone else met that issue, I haven't found anything which can cause it.

Installed with Yarn, imported into a .tsx file and after using the ScrollContainer in my JSX got this error:

JSX element class does not support attributes because it does not have a 'props' property. TS2607

Hi,

I want to find a way to set the scroll position when clicking on a button (just an example).

I stumbled upon this example from Issue #4 but I can't think of doing the same thing within a react hook.

So far I can get the current scroll position by using useRef and useEffect but I don't know how to modify the scroll position.

Do you have any ideas on how I can possibly do that ?

I have implemented a table (prime react) into ScrollContainer component.

After implementing this. Scrolling works fine. but there is an issue. I wanted to ignore the table header, Which will not be scroll-able.

So, actually prime react generate a class for table header . And i'v tried to pass this class in ignoreElemnts prop. But nothing hapen. Table header still is scroll-able.

Sample Code:
<ScrollContainer ignoreElements=".p-datatable-header"> <DataTable header={"Grade Configuration"} responsive={true} value={this.state.gradeConfigurationDataTable} > <Column field="amounta" header="A" body={tableDataValueWrapper} style={{ width: '220px' }} /> <Column field="amountb" header="B" body={tableDataValueWrapper} style={{ width: '220px' }} /> <Column field="amountc" header="C" body={tableDataValueWrapper} style={{ width: '220px' }} /> <Column field="amountd" header="D" body={tableDataValueWrapper} style={{ width: '220px' }} /> <Column field="amounte" header="E" body={tableDataValueWrapper} style={{ width: '220px' }} /> <Column field="amountf" header="F" body={tableDataValueWrapper} style={{ width: '220px' }} /> <Column field="amountg" header="G" body={tableDataValueWrapper} style={{ width: '220px' }} /> <Column field="amounth" header="H" body={tableDataValueWrapper} style={{ width: '220px' }} /> <Column field="amounti" header="I" body={tableDataValueWrapper} style={{ width: '220px' }} /> </DataTable> </ScrollContainer>

Here's the generated code after rendering:
<div class="indiana-scroll-container indiana-scroll-container--hide-scrollbars"><div class="p-datatable p-component p-datatable-responsive"><div class="p-datatable-header">Grade Configuration</div><div class="p-datatable-wrapper"><table><thead class="p-datatable-thead"><tr><th class="" style="width: 220px;"><span class="p-column-title">A</span></th><th class="" style="width: 220px;"><span class="p-column-title">B</span></th><th class="" style="width: 220px;"><span class="p-column-title">C</span></th><th class="" style="width: 220px;"><span class="p-column-title">D</span></th><th class="" style="width: 220px;"><span class="p-column-title">E</span></th><th class="" style="width: 220px;"><span class="p-column-title">F</span></th><th class="" style="width: 220px;"><span class="p-column-title">G</span></th><th class="" style="width: 220px;"><span class="p-column-title">H</span></th><th class="" style="width: 220px;"><span class="p-column-title">I</span></th></tr></thead><tbody class="p-datatable-tbody"><tr class="p-datatable-row" style="height: 28px;"><td class="" style="width: 220px;"><span class="p-column-title">A</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">B</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">C</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">D</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">E</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">F</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">G</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">H</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">I</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td></tr><tr class="p-datatable-row" style="height: 28px;"><td class="" style="width: 220px;"><span class="p-column-title">A</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">B</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">C</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">D</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">E</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">F</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">G</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">H</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">I</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td></tr><tr class="p-datatable-row" style="height: 28px;"><td class="" style="width: 220px;"><span class="p-column-title">A</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">B</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">C</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">D</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">E</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">F</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">G</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">H</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">I</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td></tr><tr class="p-datatable-row" style="height: 28px;"><td class="" style="width: 220px;"><span class="p-column-title">A</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">B</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">C</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">D</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">E</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">F</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">G</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">H</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">I</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td></tr><tr class="p-datatable-row" style="height: 28px;"><td class="" style="width: 220px;"><span class="p-column-title">A</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">B</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">C</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">D</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">E</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">F</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">G</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">H</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td><td class="" style="width: 220px;"><span class="p-column-title">I</span><div class="admin-point"><div class="calculation-box-wrapper"><div class="calculation-box-inner-wrapper"><div class="calculation-box-field percentSign"><input name="fixedPercent" class="p-inputtext p-component" value="20"></div><div class="calculation-box-amount">00.00/-</div></div></div></div></td></tr></tbody></table></div></div></div>

The code includes a Touchable component in the ScrollContainer, but this component does not respond when clicked.

Is there an argument to ScrollConainer that can help?

return ( <ScrollView horizontal pagingEnabled style={[styles.scrollView]} ref={ref} onScroll={handleScroll} scrollEventThrottle={0} showsHorizontalScrollIndicator={false} onScrollBeginDrag={clearAutoplay} > <View style={[styles.imageContainer, wrapperStyles]}> {!editor && images.map(({ image, type, fileUrl }, i) => ( <View style={[styles.imageWrapper, innerWrapper]}> <ImageItem image={image} type={type} tracks={tracks} options={options} controls={controls} settings={settings} i18n={i18n} css_properties={css_properties} ads={ads} videoData={videoData} fileUrl={fileUrl} /> </View> ))} </View> </ScrollView> ) })

Hello
I can't write a test on a component with imported ScrollContainer. I'm using a @testing-library/react for tests.

Faced with the following problem:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I think the problem is in the named import import ScrollContainer from 'react-indiana-drag-scroll'; but I didn't find any other ways to import it

I would be grateful for an example of testing components with 'react-indiana-drag-scroll' or any other helpful ideas

demo: https://codesandbox.io/s/vibrant-silence-vftxz?file=/src/index.js
In chrome 88 and 91 it will only scroll laggy about 1~5px in one direction per scroll, no matter how long I've dragged, firefox 89
can even only scroll vertically, safari doesn't get affected since it hasn't support scroll-behavior yet.

As described on the title itself. Is there any plans to support React 18?

We needed to jump to v3 to take control over the style injection into shadow roots, but ran into this issue:

The style override prop is never applied to the ScrollContainer component

It's 2022 and I think we should refactor the code with function components.

Also react 18 is released and it should be compatible.

I'll consider making a PR if you think it's a good idea.

Hello,

I was wondering if it was possible to remove the indiana-dragging class with an option, or if this options could be added as a prop ?
I'm setting a grab/grabbing cursor on the element I use the library on (a canvas element) but I have difficulties to override the .indiana-dragging on the body

(using version 2.01)

I am using react-indiana-drag-scroll to drop a pin on an image. The pin is stationary on top and the image is scrolled underneath just like the indiana-jones and hieroglyph example. The only thing is in order to know the pin location, once scrolling stops I need to figure out how much scrolling in x and y was made.

Is there a way right now to get that value from the component?

If not is there a way the current scroll value could be added as an output?

thank you.

Is this a feature request? Or am I missing something obvious?

Thanks!

I cant use the typing in the release notes. The release notes say to use this:

const ref = useRef<HTMLElement>();

However, then ref gets the typing MutableRefObject<HTMLElement | undefined>. The expected typing for innerRef is React.Ref<HTMLElement> and this does not match.

These are the typing versions used for react:

    "@types/react": "16.9.53",
    "@types/react-dom": "16.9.8",

Hey! this is such a nice component, I've been implementing it today.

I don't really get why SCROLL_END_DEBOUNCE is a constant... changing it to be a prop which defaults to 300 would make it more flexible.. and is a two line change.

Can you update it? If you want I can make a PR myself. I just don't want to fork out my own package to just change two lines 😄

Hey, I was having severe stuttering at the first attempt to drag scroll in mobile, so I just spent some time debugging and in the end I found a partial solution, which only works with activationDistance={1}.

I am not sure if this is a common problem, and if this solution opens other problems for other implementations of this library (not my case), and this solution is kinda improvised, so I don't know if it's an immediate pull request worthy solution.

Here is this published version if needed https://www.npmjs.com/package/@pablosz/react-indiana-drag-scroll

It seems like it'll be pretty trivial to implement scroll snap, given its a low hanging fruit, perhaps its worth considering?

This is the code I used to get it to work (on parent contaienr):

const Container = styled.div`
  & .indiana-scroll-container {
    scroll-snap-type: x;

    &.indiana-scroll-container--dragging {
      scroll-snap-type: none !important;
    }
 }

The only problem I've encountered is that with mobile, scrolling also triggers indiana-scroll-container--dragging, which can probably be solved with media-queries; but perhaps there should be two decorators? i.e. --dragging and --touchDragging