- This topic is empty.
March 31, 2015 at 5:16 pm #199390
I’m trying to do so that the scroll doesn’t overlap the margins (left/right) while still having the same behavior that I show here: Codepen.
I found a way, hacking into the scrollbar plugin code, of subtracting to the size of the bar on the right the margin in px, but still there must be a cleaner way. And plus this way is a bit static for responsive design and flexible margins..
Any idea on how you would solve this problem?
Thanks in advance!April 1, 2015 at 8:21 am #199415
How I would want it is with this margin (at the begining and at the end) that disappears on scroll so that you know where it starts and ends and if you have content to scroll or not, but without the scroll overlapping these margins.
Can’t say you didn’t make an effort but I suspect most people are clueless to what it actually means. Which margin are you referring to?April 2, 2015 at 9:42 am #199580
Hey! Thanks for answering! Yes, sorry… I was totally clueless too of how to explain the situation. I put some red markers on the codepen now on the areas of the scrollbar I would like to hide. :)April 2, 2015 at 10:42 am #199587
Ah, I understand. It is caused by the 3% padding that has been put on
.inner-container. Better to choose another element, outside of the scope of the plugin, to create some margin on the sides. My honest opinion – that’s not the greatest script I ever saw. And the use of
!importantin it’s CSS seems like overkill.April 2, 2015 at 11:12 am #199592
Yes… actually this script was actually just to emulate the problem because I’m planing on changing it since it has lots of problems. I chose this one because it uses the native behavior but I’m still trying out for others.
Still the problem remains with any of the scripts I choose.
The 3% padding (same as P’s and H1’s) is there because I want to give people the Idea of where the content starts and ends.April 2, 2015 at 11:22 am #199593
If you remove the padding from that element and put it on
body, that looks like what you’re after? It wouldn’t be too hard to make you’re own scrollbar with jQuery by the way. Have a look at this vertical one, it’s a fraction of the code of that plugin and no
Small step to make it continuous (but that’s wasn’t desired in this case).April 2, 2015 at 12:06 pm #199605
No, I still want the padding inside because I still want it to be scrolled along with the images, thats the bummer! If you put the padding onto the body, the scroll behavior would be completely diferent and the scollable content would be framed inside a white box.
To be clear, here’re some images of the website itself:
How I have it now:
How I would want it:
And this is the behavior I want to keep:
April 2, 2015 at 12:12 pm #199606
And thanks for the tip! Actually I didn’t think on doing it myself as there are certainly good scripts out there better than any I would do, and with the proper behavior in mobile, browsers and OS’s…
but yeah, unless there is a better idea for doing what I’m doing istead of hacking into the plugin’s code, to do what I want maybe the only solution is to do it myself yeah… :/April 2, 2015 at 12:18 pm #199607
Ups, I noticed the last pic was wrong… now its ok! :)April 2, 2015 at 1:27 pm #199612
I understand even better now. Had a look but it would be a real drag to try and adapt that script itself. Overriding didn’t quite work either unfortunately (from what I tried).April 11, 2015 at 7:44 am #200236
Hey! Sorry for the late answer!
Well, yes, that’s exactly the problem, and adapting the code, like I tried and was more or less successful for a particular screen width, does bring a problem when paddings/margins change on a proper responsive designed site, it would have to have a little api to change it along the way or have it transformed extensively to the point of the code being partially yours and you having ruined some well built pillars of the plugin… :P
My hope posting in here was to have some different insights on this… like some horizontal parallax mechanisms (?) or other that I didn’t think of.
But thanks a lot for trying! ;)April 11, 2015 at 10:45 pm #200263
Why don’t I just make one for ya that’s easily accessible (still working on some details though, will finish it later)…April 12, 2015 at 4:00 am #200275