How to fix position of center content when vertical scroll is visible due to large amount of data. It slightly moved as shown in bellow pictures:
Without vertical scroll is fine
now with vertical scroll:
how i can fix central div when scroll visible?
A common solution is to always show a scrollbar whether it's required on not.
Just add overflow:scroll-y to the body element.
Related
This is the page in question: https://globalstudyuk.com/home-page-test/
You will see that on both desktop and mobile, there is some blank space on the right of the page.
I haven't found any solution in my code based on similar StackOverflow questions.
There should be no horizontal scrollbar, with everything filling the full width of the page.
Place the final .row inside the .container in the footer.
The negative margin on the .row is countered by the padding on the .container class.
Always useful to revisit the Bootstrap docs when things go awry:
https://getbootstrap.com/docs/4.0/layout/grid/
I had the same or very similar problem. Making the window more narrow everything seemed to resize correctly, except a horizontal scrollbar appeared at the bottom. When I scrolled with it, white-space appeared on the right side of the page.
Turns out the reason was that on the top of the page I had an element with width 100%. But under that I had another piece of text inside a PRE -section, with lines that were quite wide, wider than the resized window-width.
When I made the window more narrow the top element resized correctly but the PRE -element no longer fit into the horizontal space available, thus creating the horizontal scrollbar.
When I used that scrollbar the browser (of course) did not resize the content on the top of the page, because I was not resizing the window, only scrolling it horizontally.
Therefore the browser did not readjust the top element after the scroll to take 100% of the new visible width and therefore it could only show whitespace to the right of it as I scrolled.
So if you have this type of problem, check out if there are any DOM-elements below the currently visible ones, and whether they might be the cause of the horizontal scrollbar.
My particular problem was solved by making the PRE-section defined like this:
<pre style="width:100%; overflow-x: auto; "
> ...
Now when I make the page too narrow for the PRE-content to fit in horizontally, a horizontal scrollbar appears, but now only under the PRE-section. Scrolling it only scrolls (horizontally) the PRE-section, not the whole page. When I scroll vertically to the top of the page I don't see the PRE-section nor the horizontal scrollbar under it.
Here's what I have: 1000px width div's inside a 100% width container with a background image repeating horizontally.
Live: http://www.baskra.com/scroll
When I resize the browser window (anything less than 1000px should generate a horizontal scroll bar, right?), the scroll bar doesn't come up, as you can see in the image below.
What should I do to make the scrolling bar appear? (Nevermind the slideshow, I'm still working on it.)
JSFiddle: http://jsfiddle.net/vBjeg (Not every image is working, but I believe the most important here is the CSS.)
I appreciate all your thoughts!
Remove overflow: hidden from .row
There is a cross browser dilemma especially now that safari uses an internal scroll mechanism that floats on top.
When a div with fixed height's content ends up getting larger than the div we need a scroll bar, but the scrollbar takes out some width and thus a horizontal bar is added to. How do we prevent a horizontal scroll even if the content is to wide I want no ability for the user to be able to scroll horizontally.
The CSS3 property overflow-x:hidden, still allows the user to scroll left and right with a trackpad. I want it disabled completely, or a solution that removes the problem of the vertical scroll bar taking width from the div.
Any ideas?
Marvellous
One solution is that you make the vertical scroll bar always display:
overflow-y: scroll
But still the scroll bar's width doesn't stay the same across browsers.
Or you can make a custom scroll bar replacement with div/CSS/JavaScript. Here is a jQuery plugin which seems promising:
http://jscrollpane.kelvinluck.com/
Set the image as background should fix your issues
I seem to be missing a horizontal scroll bar on this page, http://www.animefushigi.com/
If you make your browser window skinner, half the page will be cut off but there will be no scroll bar.
I believe the main content width should be 1024 px before the need of a scrollbar
because the wrapper div does not have a stable min-width(and for browser which not support min-width, such as ie6, there is a child div .wrapper has a stable width in this case, so it will be ok,too ),which should be setted.
e.g.
//add css
#master_wrapper{min-width:1000px;}
It looks like overflow:hidden is used to clear floats in a couple of places. If you get rid of it on #master_wrapper then the horizontal scrollbar will return. However this will cause that element to collapse to a height of 0 and making this image disappear from your page. You can however rearrange your background images using the html for one of them to sort that issue out.
I have a div tag which has table header on it and the rest of the table content is in another div. I need to make the position fixed when vertical scrollbar is scrolled so that the table header will be seen on vertical scrolling.Upto this point its not a problem because using div position:fixed,it will work. But the problem is during horizontal scroll the header should not be fixed. is there any horizontal and vertical scroll event to make the position fixed and absolute?Please help
Getting elements to respond differently for horizontal scrolling and vertical scrolling sounds like it would be handled best with Javascript. CSS can give you a fixed element, but it will be fixed for both x and y scrolling.
this will help you. pure ccs: http://www.imaputz.com/cssStuff/bigFourVersion.html