If I have a div on the middle of the page that is scrollable, how can I disable scrolling outside the div when the cursor is inside the div?
When scrolling to the bottom of the div, I don't want it to start scrolling the rest of the page.
The scrolling in the div is enabled by overflow:auto in the CSS
I have this JSFiddle so far.
Related
I am creating a menu with scrollbar which it will be visibled when items in menu overflow out of vertical. But when scrollbar is visibled, the items inside will resize width.
When scrollbar invisible:
When scrollbar visible:
Here is my code on Tailwind Playground: https://play.tailwindcss.com/IhZSluWfIy
I need to keep width of item menu like inherit. How can I resolve it?
Add style="scrollbar-gutter: stable;" to the parent div:
https://play.tailwindcss.com/zGT2EBpznK
As I drag the right side of the window making it thinner, the div of content I positioned absolute over an image continues to slide up the page.
How do I keep the div of content still?
I have a div element which is header and is fixed. I want it to remain at top of my website while other contents move below it while scrolling.
Below this header is a div element containing two div elements, one is floated left while other right.
Now when i scroll down my webpage left floated div element moves below the header as it should. However the other div element is moving over the header. I tried using z-index but it's not working. Please help.
Please add the sample code to understand the problem.
Try adding z-index to the parent. Something like this
.fixed{
z-index:1;
}
.float-parent{
z-index:0;
}
I have an absolutely positioned div, with overflow:auto.
When it overflows vertically, a vertical scrollbar appears. This appears within my div (even though it isn't fixed width), which shrinks the space available to the div's contents. In my case, it causes the text to wrap unnecessarily, which is undesirable.
See https://jsfiddle.net/hktgcrj0/ - shrink the page until the div overflows and the scroll bar appears - you will see the text wrap.
Is there any way to make the scrollbar appear outside of the div, or increase the width of the div to accommodate the scroll bar?
Note that for my application (the fiddle is massively simplified) giving the div a fixed width is not an option, and disabling text wrapping is also not an option.
Try adding:
div {
white-space: nowrap;
}
or wrap the inner elements in <p> tags and apply white-space: nowrap; to that.
Is there any way to scroll a div from the main page scrollbar ?
Here is an example of the page I would like to change:
Scroll bar example page
Or can we put the div MAINDIV inside another div which would be 100% height and width, and scrolling this div would scroll the MAINDIV div ?
Remove "overflow-y:scroll" (and "height: 580px" to make it look better) from the MAINDIV.
Removing "overflow-y" will remove the scrollbar from the MAINDIV, because you want this scrolling to apply to the body not the MAINDIV.
AND
replace "overflow-y: none" of the body by "overflow-y: auto". Now a scrollbar should appear if your MAINDIV content does not fit the browser.