I'm trying to create an overlay that may contain its own scrollbar. The overlay should take up the full width and height of the screen, and scroll its own contents if they are longer than the page height.
My problem is I can't figure out how to stop the actual page from scrolling when the overlay scrolls. I want this to act like a Bootstrap modal.
Here is the fiddle with a code example: https://jsfiddle.net/r5jLcekb/
In the example, I'm using:
fixed bg-black bg-opacity-50 w-screen h-screen overflow-y-scroll
As you can see, the page scrolls it's contents, not just the overlay. I only want the contents within the overlay to scroll. Is this possible to do purely with tailwind?
I think you're looking for overscroll-auto -- see https://tailwindcss.com/docs/overscroll-behavior for more.
The way I approached this problem is by adding a class to the body whenever this overlay is rendered. Whenever your overlay element is mounted you need to execute a javascript code that does the following :
document.body.classList.add(`overflow-hidden`);
document.body.style.marginRight =
document.body.offsetWidth - widthBefore + "px";
The second assignment is optional and it's added to get rid of layout shift when scrollbar shows and hides
I had this same issue. My parent container was scrolling for the entire length of the site when the fullscreen overlay was active, but the content was not scrolling in the fullscreen overlay. I added overflow-y-scroll and overscroll-y-none to the fixed container and it worked nicely. Hope this saves someone some time :) Thanks Jas (comment above) for the point to overscroll.
See https://tailwindcss.com/docs/overflow
and https://tailwindcss.com/docs/overscroll-behavior
Related
I have setup this playground to show the problem I am having
tailwind playground example
Resize the window a little to get the scroll bar.
I want to have scrolling just in the body element of this layout.
When scrolling is activated, it hides parts of some elements, and I can't get them fully visible when scrolling.
What am I missing here ?
I have two components in a page, a position fixed element which covers the browser window which has a child image with transparent background, and a fullpage.js vertical slider powered by CSS transforms, with the following markup:
<body>
<div class="fixed-element"><img src="transparent-bg-icon.png" /></div>
<div id="fullpage-container">
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
</div>
</body>
I'd like the fixed element to display over the first section so the image is visible, and then the second section to slide over the image so the image disappears under the section. With the above markup this isn't possible with any combination of z-indexes, and if I put the fixed element inside #fullpage-container the position fixed of .fixed-element is no longer respected due to the transform on the parent.
Is there anyway to achieve this effect that I've missed?
Doesn't sound like it is possible. Mainly because whenever you change the z-index (which will have to be on section leave or on section load by using the fullpage.js callbacks onLeave or onLoad) the image will suddenly appear or disappear:
When changing the z-index on onLeave, the image will disappear behind the 1st section while the section is moving to the destination.
When changing the z-index on afterLoad of the 2nd section, the image will be over the 2nd section for a small period of time before the 2nd section really stops moving. So you'll see how it suddenly disappears behind.
The only option I could see is:
You use the fullPage.js option scrollBar:true so you can get the current scroll position using the scroll event (or any library that do so).
Then whenever you detect the fixed image is going to hit the 2nd section, change the z-index just right before it does.
You will also be able to play with z-index even when placing the fixed element inside the wrapper. As fullPage won't be using css3 transformations anymore (although performance won't be that smooth)
I have a container on my site that is 100% of the screen width and has its own scrollbar using overflow: auto. The standard scrollbar does not display on my site and I use this instead because there is another layer behind the main layer of my site that also has its own scrollbar (you can view my site here and click a blog post to see what I mean).
I have a blue bar that I want to be fixed to the top of the screen. This is easy enough in terms of positioning in that way with position: fixed however the width of the bar needs to be 100% of the screen width and I'm finding that the bar will overlap the scrollbar that is applied to its parent container.
Here is a jsFiddle showing what I mean: http://jsfiddle.net/xUTR2/1/
I've thought about just offsetting the bar to the left based on the width of the scrollbar, but then I decided that I couldn't rely on estimating the width of the scrollbar across different browsers, and that would leave a gap if there were no scrollbar.
Is there an obvious way to force the scrollbar to render ontop?
As I can't comment yet, im forced to give an answer.
If im correct you would like to get the top blue bar in a fixed position as in visible while scrolling down.
personally i would make seperate containers
something like
<div id='page'>
<div id='bluebar'></div>
<div id='content'></div>
</div>
Demo can be found here ( http://limpid.nl/lab/css/fixed/header )
you can do this by jquery easily, at some event.
$("body").load(function () {
$('scrollable container').css('overflow-y', 'auto');
});
try keeping the blue bar and other page content in separate containers, i think it will solve the problem for you.
This is impossible to achieve in a clean/robust kind of way because anything you position as fixed is done so within the context of the main browser (and within any scrollbar it has), but because you removed the main body scrollbar (and you must because you cannot z-index position on top of it) it doesn't think anything is there, yet you have this div below it so the only options you have are to use fixed margin and height for the two elements or use some javascript method to determine the correct width of your top div.
I have created a div with an image inside. When clicked it resizes the div and places a larger image in. The side effect of this seems to be that the wrapper div moves a little to the left.
I have tried a few things but here is the code. Hope you can help.
http://jsfiddle.net/iamjasonlucchesi/3FuJ6/2/
Please make sure you can see the margin between the body and the Wrapper before testing the code.
Also note images dont work as I have not put them in.
The problem is a Horizontal Jump, caused by no scroll bar being displayed in some browsers.
The link below is how to solve it.
http://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
I have a div that is positioned:absolute, this div extends outside the bounds of my site wrapper as it just contains a background image for a slider and doesn't need to be seen all the time. The problem is I cannot work out how to stop this div triggering the scrollbar. I have tried different combinations of overflow and position and cannot work it out.
If you inspect the element with firebug, just place it over the shadow behind the slider and you will see the div in question. You notice the scrollbar kicks in as soon as the browser bounds touches it.
View link
Can anyone let me know how to stop the scrollbar appearing for the shadow div?
Cheers
Nik
It is the size of the DIV. When I inspect it using Chrome, the CSS shows that the container DIV was set to 520px width and the problematic DIV was set to 733px, so it actually exceeds the 980px width center area. Unless you want the shadow to disappear, I suggest moving it a bit to the left and make the div left to it smaller.
You can use the CSS overflow-x:hidden on the body element.
Other more complicated way that comes to mind is using jQuery to detect the size of the window and resize the problematic div according to the window's size.
Firstly, thanks to those that commented.
I have come up with a solution that allows me to keep the layout the same while still adhering to the document width. What I did was create a #wrap2 inside the main wrapper which has a width of 100% (full width of browser window).
#wrap2 {background: url(../css_img/slider-bg.png) no-repeat center 317px; }
The trick to this was making sure the image position was set to center. This means the image would also remain relative to the content when resizing the browser. The way I made the shadow line up behind the slider was to add blank pixels to the left, so the image ended up being about 1200px wide, this pushed shadow part right. Because it's all blank pixels it only added about 1kb. If someone thinks there is a better solution let me know.