Scroll crash when scroller wrapper is smaller then scroll container
Closed this issue · 24 comments
I got this issue when i got a fixed element in with i like to use slim scroll.
If content is smaller then the container and I'm adding the slim scroll i got error:
Uncaught TypeError: Cannot read property 'offsetHeight' of undefined
crated by this line (12):
i.h = i[S].offsetHeight;
and its annoying cause:
when this fails the code that i got in created is not executed. And if you resize window to the size that scroller is needed is not there. Css to hide original one is also not added so original scroll is visible.
I use resetValues() on window resize and this is not adding scroller if is not there.
The scroller actually do what I need and is simple so plus.
Second issue is that if you zoom out website hidden scroller begin to be visible :/ and also it create some additional space with elements that have 100% width in them
Please at list give me a hint how so solve first issue cause second one i got idea how to fix for my purposes.
Thanks
Hey thanks for letting me know about this. I will check this tomorrow morning and let you know.
Thanks a lot.
I will be investigating this today as well. Cause I need to finish my application element in with I would like to use your class. If I will find a "dirty" solution I will let you know so maybe you can implement that nicely and commit that.
Regards.
Hi. Sorry was busy with work. Can you please create a short simple fiddle showing this issue?
That would help me a lot. Thanks.
Yes I was thinking about starting with this :)
Wen it's finished I will give you url.
OK
I got 2 versions:
https://jsfiddle.net/cjwqpeb4/3/
in this you can see the error in console.
https://jsfiddle.net/cjwqpeb4/6/
in this one slim is not added and you can see the original browser scroller.
In both cases you need to refresh the page when UL list content is fully visible and then resize height of the page down to see what is happening wrong.
When UL list content is partly visible and you resize window height up everything is ok.
And for some reason this jsfiddle works only in Google Chrome. But code works the same in all browsers. So maybe just jsfiddle implementation.
Tell my if you see both of bugs in given urls.
Regards
I understand the first bug. Actually, I didn't consider that case. That's a good point. I am trying here to fix it.
I think the second one will go away with the first one :)
Informme that is done I will test this :)
Thanks
So i see the status has changed of my issue ??
Any progress ??
@gsgenerator unfortunately, no. Clearly because of my fault of shortening the property names. Now even I can't understand the flow.
BTW, the problem is happening because the init function will work only when there is scroll. and when we resize vertically to bring the scroll, the code isn't considering this case. I need to see a way to inject init function also in assignValues function (which is being called on window resize).
Note: init is already calling assignValues function. So, we should avoid a infinite recursive calls by calling init again in assignValues function.
I am trying to fix here whenever I get time using some flag variables to check the state.
I tried this and it was creating new errors.
I waned always execute init even if there is no need for it. And it was not doing anything. And I got some extra code in onComplete so this was putting me off a little.
Your scroller works good if you have drag and drop jQueryUI sort in the side menu. That's why I decided to use your class. But I see its a little buggy.
I really don't even know what most of the code do, because of the names so I'm just guessing.
I thought that you have original version of this somewhere.
Yes, seems I am the only one who could fix this. Will fix it and let you know here soon.
Sounds Great :)
And another thing. When you zoom out website the original scroller is starting to show on maximum zoom out of the browser.
Maybe using fixed value of the padding-right like 100px will be bedder then calculate how much it takes.
line: 195.
Maybe a parameter that everybody can desire how far away the original scroller will be moved out.
@gsgenerator yes that seems a nice idea too. Will think about it. Thanks :)
Hi there
I just add one fix to your code.
While dragging element inside element that have simScroll when you move left / right not only up down. Right padding is scrolled. Event if i have overflow-x:hidden; css set up.
Solution for this is :
add line:
e.target.scrollLeft = 0;
just after:
doScroll = function(e){
line: 110.
this will prevent left / right scrolling while dragging.
Still waiting for your fix :)
As you see I still investigating your class and give you some solutions at lest :)
Any update on this ??
Sorry for delay in fixing this issue. please check it and let me know if there are any regressions. My next goal is to make the code readable and refactor it. Thanks for contributing :)
Hi Thanks for fixing this :)
I didn't look at the update yet, but I will before the Christmas (BTW Merry Christmas).
I made some new discoveries about your class.
Sometimes when you refresh the page you can still see the original scroller from the browser until your class is fully initialized and right padding is added to hide away the scroller. I did overcome this by setting css display:none to the main container and setting display:block after the class is initialized.
Second thing is amount of right padding. I hard coded this to be 100px (and then I created my css to also use this value all over the scroller element). Like I said before, calculating amount of right padding like you do is good but. When you zoom out and in the page original scroller starts to be visible. Bidder padding-right put it more to the right so its not visible. That would be nice as a parameter to setup. so I can control it.
Next thing is position of scroller. I needed my scroll to be on the left side so I did this with css (right: auto, left:3px) but also parameter wold be nice for this.
I must say that grabbing the scrollbar with mouse is a little problematic cause is very thin. But this could be done with css. Create a bigger invisible element for better aiming.
I will write you feedback after I test it.
Regards
Merry Christmas to you too :)
I had forgotten about these changes which you had proposed. I added issues accordingly. Thanks.
I must say that grabbing the scrollbar with mouse is a little problematic cause is very thin. But this could be done with css. Create a bigger invisible element for better aiming.
That can be fixed by giving more width through CSS.
Ok I tested you update today.
I don't have good news. Now almost nothing is working :/
I see you added my jsfiddler test to your repo :) This is i think my first contribution to anything on github :)
But in this example (test 2, my example :) ) on Chrome and Firefox when you open there is no scroll, you resize window down the scroll shows up :) but you cant scroll it by anything else then just garbing the bar with mouse. Scroll don't work. And I admit I didn't test it yet with touch screen or smartphone. But definitely scroll is not working.
The other example (test1) is working on big window. When you make the window resize all of the suden scroll stops working. Don't know what happens.
In my project now I cant scroll my submenu at all now.
And tomorrow I need to show this to my boss :/ Don't know why he wants this tomorrow cause I got full hands with other thing and now this :/ I will try to make some hack to old one. But this one is definitely worse then the previous one unfortunately.
To be honest this class have huge potential cause its the only class that I found that drag and drop, sort, from jQueryUI moves the view while dragging. And this is future that people want.
You know maybe is time for Version 2 ??
Scrap the whole thing and rewrite it to make it more solid :) For me sometimes its quicker to take good parts of old code and do it again then fix the old one. The idea is great. The function got huge potential I give you that. Now its your turn :)
I can definitely test this for you, cause I need it, and I'm good in testing and breaking things :)
Ok I just tested on touch screen it's also not working. Whenever mouse scroll stops working the touch is also failing.
Thanks. I will see this when I have time. Unfortunately, I get leisure time to work rarely. Till then I am reopening this issue.
Hi again
I like the fact that you take a part of this :) And you response this is important.
I got good news. I found a bug and a solution to almost everything.
I need to show this tomorrow so you know i need to mess up your code to make it run for me ASAP.
So what i did:
Go back to code to TAG x1.3.0.
Then you got code in lines: 234 to 250.
This are the lines that check are you on mac.
This is the problem.
move them to end of function assignValues. but complete removed the check just always add left and padding left..
And while I'm looking at this :/ I think I made a lot of changes :/
I think I need to show you the whole thing.
I will make you a jsfidler with this and you will see and maybe implement this nicely.
@gsgenerator yes please create a fiddle. and again thanks for your huge contribution :). Since, the issue raised in this post was fixed, I will close this one. If possible, please create a new issue.
but you cant scroll it by anything else then just garbing the bar with mouse. Scroll don't work.
^ seems working fine when I grab the scrollbar with the mouse. Or I didn't understand the point. Please check demo.