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
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.
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.
This issue is with mobile touch devices.
My main screen is vertically scrollable and it's working fine. Inside of it I have got another div with horizontal scroll which works as well.
The conflict happens when I am trying to scroll vertically by moving my finger over child (horizontal scroll area) div. It doesn't scroll at all!!!
The area around this div lets me scroll up and down without issues.
Has anyone got a solution for this? Is it a css problem?
You will have some issues using that scrollable div on certain mobile browsers. Some require a 2-finger scroll and some don't allow scroll at all. I fear you will have to use JavaScript to detect scrolling.
One I came across which looks quite good was iScroll.
In my current markup, I have two scroll boxes in the dashboard div. I want the gray highlight around the selected task to stretch and meet the highlight around the info box to it's right. Is there a way to do that?
http://jsfiddle.net/rEKwb/2/
Thanks!
edit:
OK, this is what it looks like now.
http://img.photobucket.com/albums/v410/justice4all_quiet/what_it_do.jpg
The gray box around the green box is cut off. I'd like it to stretch to meet the gray border to the right of it, which is in a separate scroll box.
This is what I want it to look like.
http://img.photobucket.com/albums/v410/justice4all_quiet/example.jpg
There is always the space for the scrollbar, even if its not in use.
If you can force the scrollbar to the left, you will get rid of the gap on the right.
You can try changing text direction, to force the scrollbar to the left:
direction: rtl;
I think because you have your <section id="tasks"> with a style of overflow: scroll; it will create a horizontal scroll bar if you try and stretch the <div id="selected_task"> beyond its parents defined width. Basically you can't have elements that are within a overflow: scroll; ignore the scroll rule and render outside of the box... it will always create horizontal scroll bar to manage the extended content.
A workaround may be to use a jQuery scroll bar plugin and play with position:relative and z-index values of your divs sense these plugins usuall use a combination of divs to create their scroll bars and not the browsers scroll bar.
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.