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 ?
Related
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
I have 3 divs nested like so:
container
drawer
drawer-content
I want vertical scrollbars to appear when viewport space is restricted. To do this I'm giving the style overflow-y: auto; to the container div and the drawer-content div. I want both these scrollbars but not for them to both appear at the same time.
There is an action which opens the drawer and before it is triggered only the container div is visible with it's scrollbar. After opening the drawer, the drawer and drawer-content divs overlay the container and I want the container's scrollbar to not exist, and only the drawer-content's scrollbar to appear instead.
This screenshot when the drawer is open shows the problem. There is a red border for container div, blue for drawer and green for drawer-content. I'd like the outer scrollbar, which is on container div, not to appear.
Of course if viewport restriction occurs once the drawer is already open, this is a non-issue. It's an issue when the viewport was already restricted before opening the drawer, so the scrollbar for Container div appears, then we open the drawer and drawer and drawer-content appear on top, but drawer-content's scrollbar should be the only one.
The reason I'm creating extra scrollbars is because this container sticks to the top of the viewport when scrolling down the main page, thus content could become inaccessible, which is undesirable.
I've got a Javascript solution to this but looking for a CSS one.
Here's a fiddle which is not exact but close to the situation. For some reason the scrollbars only show on Windows so far. Looking into that. https://jsfiddle.net/8z49z1dj/5/
Any ideas?
Thanks!
In your fiddle, you're explicitly setting the overflow-y on the container, but you'll only want that when the drawer isn't open.
You can add an extra class indicating the drawer is open or not on the parent, like so:
document.getElementsByClassName("container")[0].className += " has-open-drawer";
Then, in your CSS you're able to override that overflow behaviour like so:
.container.has-open-drawer {
overflow-y: hidden;
}
Bear in mind you might need to remove that class again if the user is able to close the drawer.
See my fork with the changes here on JSFiddle.
I'm building a web application and testing with Google Chrome. I have a sidebar element where, if I hover over that element, I want to disable scrolling for the body element.
I achieved this by setting overflow: hidden on the body tag using CSS whenever a user hovers over the sidebar. I tested this on a browser without a USB mouse plugged in, and it worked great:
Sidebar Closed (body scrollbar visible)
Sidebar Open - Bad (body scrollbar still visible, producing an ugly overlap)
Sidebar Open - Good (my fix: hiding body scrollbar, so that sidebar scrollbar displays alone)
This works because Google Chrome doesn't render scrollbars as actual elements (that have widths). However, when I plug in my USB mouse, the scrollbars now do have widths. And thus, when I move my mouse from outside the scrollbar to inside the scrollbar, the width suddenly changes:
Before Hover (body scrollbar visible)
After Hover - Bad (body scrollbar hidden, suddenly decreasing the width of the whole sidebar)
This produces a really ugly and glitchy visual effect, where the widths of elements change when you hover over them. I've looked everywhere for a solution to this... any help would be much appreciated! Thanks so much!
If you are on a mac, chances are your OS is adding the scroll bar when you plug in the mouse, a scroll bar that will override most CSS selectors.
There is not a way to override this with CSS that I am aware of. If you change your system preferences you will find your website behaving the way you intended.
System Preferences -> General -> Show Scroll Bars -> Change from [ALWAYS] to [WHEN SCROLLING]
.MY_CSS_CLASS::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent;
}
This fixed my issue with ugly scrollbar being displayed when mouse is connected.
Specifying width to the body element will keep content width constant.
Here is the working example: https://jsfiddle.net/fuhacLtn/2/
First, you should pay attention to the rendering with other browsers and with chrome windows. As you know, the windows scroll bar is clearly not the same and is not rendered in the same way. You might have surprises with this.
Otherwise you maybe should pay attention to jQuery custom content scroller plugins.
This could actually helps you a bit more to control the scroll & the overflow and customize the scroll bar depending on the render you would like to give to it.
Good Luck'
I have been playing around with -webkit-overflow-scrolling:touch; for a while and I getting randomly the following problem:
I only need scroll top/bottom ( width is fixed ), but sometimes the user needs to scroll left and right to
trigger the vertical scroll.
In other words, the user has to scroll horizontally to make the container scroll vertically.
again it is random, some times it just works.
I already have check all the relative positions for the child elements within the scroll.
any thoughts ?
I had as well a scroll that never broke and by looking at the html inside it I realised that if you apply the -webkit-overflow-scrolling:touch; in ul element it will never break.
the scroll that used to break had many elements within it and all I had to do was make the ul elements scrollable separately.
cheers
Ran into the same problem, been struggling with it forever until I did this:
Changed overflow-y: scroll to overflow: scroll. I've loaded up the page close to 20 times now and haven't experienced the left/right going up/down weirdness.
I work on a complex web application that uses multiple iframes. I have a window.setInterval setup that removes native scrolling from hidden iframes and adds it to the visible iframe. This works great except I experienced the same issue where I had to swipe left / right to scroll up down. I noticed if you opened or clicked on a different browser tab and then clicked back it fixed itself. We fixed our issue by adding the following jQuery after we apply the native scrolling to the visible iframe:
$(window).height($(window).height());
I am thinking this must force a repaint similar to clicking on a different tab and then clicking back does. Hopefully this helps someone in a similar situation!
As stated in the comments by Graygilmore. This worked for me:
// NOTE 2019-04-09: [referenced link was removed]
Make sure no parent element of the scrollable area is visibility:hidden or display:none.
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/