Scroll margins but no overlap

[Masserra]

Hey there!

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!

[Shikkediel]

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?

[Masserra]

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. :)

[Shikkediel]

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 !important in it’s CSS seems like overkill.

[Masserra]

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.

[Shikkediel]

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 !important whatsoever :

http://ataredo.com/

Small step to make it continuous (but that’s wasn’t desired in this case).

[Masserra]

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:

[Masserra]

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… :/

[Masserra]

Ups, I noticed the last pic was wrong… now its ok! :)

[Shikkediel]

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

[Masserra]

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

[Shikkediel]

Why don’t I just make one for ya that’s easily accessible (still working on some details though, will finish it later)…

http://codepen.io/Shikkediel/pen/BygGOm

[Shikkediel]

Well, it’s an example at least that’s close to being nice. There’s a weird issue with getting dimensions of inline elements across browsers apparently. Firefox looks good but the others are including the padding for setting the scrollbar width…

Here’s where it’s at

[Author]

Posts