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.
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
I want to have a set width for my page with no horizontal scroll bar. (And if my elements exceed the page width, they don't add width or a horizontal scroll bar to the page.)
Probably not the best user experience, but this is what you need to add to your CSS:
body {
overflow-x:hidden;
}
I have my website that is 1000px wide and centered. I have a div, inside the centered 1000px div, that is 500px left and 700px width. The div overflows out of the 1000px div to the right by 200px.
Everything looks great but on smaller monitors the overflowing div creates a scroll bar on the bottom.
Is it possible to mark this overflowing div as something like "do not add to scrollable area"?
I only want the overflowing part of this div to be visible if there is enough room on the screen.
**Added a Picture to help describe the issue.
**Added js fiddle here << had to use bit.ly cause it won't let me post jsfiddle
You should use height and width in percentage. By using this it will work on every resolution and div never get scrolled.
Like
div.body{
width: 100%
margin: 0 auto;
}
Could you let me know what is exactly your HTML DOM structure?
Add this CSS to your overflowing div. Anything that spills out of the div will not show in smaller monitors.
overflow: hidden;
Add overflow:visible; to the div with 1000px width. This will make the portion of the 700px width div to extend to right over the yellow div.
To prevent the scrollbar give overflow:hidden; to the body tag. But if the screen width is less than 1200px, the right portion will get cut. Try this anyway.
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.
I would like to fix my navigation bar to the top of the browser window, but allow horizontal scroll for nav items for nav items that may have overflowed when the browser width is decreased. An example is the gmail nav bar being fix to top but still horizontally scrollable when the window width is decreased.
Currently I use the following css for the div which fixes the div to top but does not allow horizontal scrolling because it is fixed(tried overflow:scroll but doesn't do anything):
position: fixed;
top:0
overflow:scroll;//does nothing
If you give it a right and left value, it should scroll: http://jsbin.com/edopor/4/edit
If overflow:auto; doesn't work it may be the possible lack of a doctype.