I want to show vertical scroll bar for mobile browser for always, not only if page hight is increased, i have tried this html {overflow-y: scroll;} it works fine in desktop but not in mobile device, any suggestions...!!!
If you make something width a fixed height or width container such as a div, and then put another div inside it that is allowed to overflow it with height or width auto and overflow hidden, you can get drag behavior automatically if you set overflow: auto, or even overflow-x: auto or overflow-y: auto on the fixed height / width element.
However, users will not always be able to tell that the area is draggable by visual cues like scrollbars appearing like they do in desktop browsers.
You can use a custom scroller such as https://github.com/inuyaksa/jquery.nicescroll and style a bar of your choice. Mobile example here: https://thoughtand.co/tings/ (This has a chunky looking bar but it can be really whatever you want)
Related
Hi I have a problem with a vertical scroll not being displayed in a container with overflow:auto. the problem is that the height of the container is exactly the same than the height of the content, but the content width is larger, so the horizontal scroll appears, that fact should force the vertical scroll to appear too, but it does not. any ideas?
Here a codepen because an example is better than the words.
https://codepen.io/xmorelll/pen/yLbObdJ
I try this code on chrome and firefox browsers. The problem is that different browsers might have different implementations for this. In chrome(Version 91.0.4472.114, Linux), the container is 485px but in firefox, it is with a width of 500px. The vertical scroll is also visible in my firefox browser(Version 89, Linux). When I change a CSS property of the container class in chrome, it is showing the vertical scroll. Basically, the (overflow: auto) will show scroll when the content exceeds either parent's width or height.
I'm building a full-page web app and it works beautifully in chrome, but in safari mobile it goes wonky. This is because safari mobile has the navigation bar on top and another bar on the bottom. How can I make my page account for them? I've been researching this for weeks and have tried every suggestion. I'm hoping someone here can help.
How do you get the height with and without the top and bottom bars? In truth, I don't really want either bar, but as far as I know there isn't a way to get rid of them except for the user to add the app to their home screen. If my user doesn't have it added to their front page yet, I have to account for the height of the bars. The reason I have to account for them is my page has a map, which must have a fixed height in order to show, it can't be flex. I also have buttons and user controls on both the top and the bottom of the screen, which must always be visible.
What is happening now is that sometimes the content jumps UNDER the navigation bar and therefore those controls become unusable.
I want to set the page height to be the height BETWEEN the nav bar, and status bar, if they are showing, the AVAILABLE screen height. Looking for either a css or javascript solution.
Can anybody help?
Testing with ios 11.2.6.
This whole thing absolutely stinks. I don't really have a solution - don't think anyone does - but here's what I know about it.
CSS 100vh is the maximum height Safari's viewport can be, i.e. with bars hidden. So if the bars are showing, it's too big and things might go under the bars like you're seeing.
CSS position: fixed; top: 0; bottom: 0 fits to the current size of the viewport without bars and will change when the bars show and hide, so it's a lot more useful. But you can't make everything position: fixed.
window.innerHeight is the same as 100vh so that's not much good.
So the only way I know to get the correct height from JS is to make a position: fixed; top: 0; bottom: 0 element and measure it. Then you can apply that height back to other elements to make them fit on the screen, oh, but the height will change when the bars show or hide. Heck.
Sometimes it's best to go nuclear and put the whole site in a position:fixed div, and overflow: hidden on the body, so that the document never scrolls and the bars never hide.
If the body is overflow: hidden, document.documentElement.clientHeight also gets the height without bars.
The boys at Safari HQ say this is all by design and they intend to keep it this way, and Chrome will be implementing it soon too. What a mess.
Currently, overflow: auto only reveals scroll bar when user starts scrolling and hides the bar after scrolling event finishes on mobile (on android at least, don't know iOS).
I previously thought there is no css rule could always show scroll bar when overflow occurs and hide the bar when content fits. Today I bumped into this website, and if you check its mobile site, it's code blocks does exactly what I wanted. I quickly checked it's css rule, and it's also overflow: auto. So I'm wondering is there any special trick in css that can always show scroll bar when overflow occurs. If not, is there any concise vanilla JavaScript code that could realize this effect.
try overflow-y: scroll;
reference: https://css-tricks.com/snippets/css/force-vertical-scrollbar/
I've got an affixed data-spy side-menu div that has too many elements to fit in my browser window. The side-menu contains links that anchor to other areas in the same page.
Currently, the div is affixed to the page just fine, but since there are too many elements I can only navigate to about half the links in the menu. This is bad because I want to be able to easily go from item to item no matter where I'm at in the page - the page is very long.
If I add style="overflow:scroll;", a scrollbar appears in the affixed div, but the scroll is grayed out and it won't actually scroll.
How can I make the affixed div scrollable?
Add height property to your div.
This is what worked for me (and what I copied from Bootstrap's documentation page...)
height: max-height: calc(100vh - 4rem);
overflow-y: auto;
Now the scrollbar appears only when needed (viewport height is insufficient for the content). Seems to work nicely at first glance...
See also: How to add auto scroll bar vertically to cssbootstrap affix menu for smaller screens?
I've written a web application and found that when I resize the page, the browser doesn't display it's own scrollbar as the window shrinks. This prevents the user from accessing content. I've set my body width to 500px and set the navbar to white-space:nowrap. How can I get the browser to recognize that there is content to the right of the screen?
Just to clarify I want the browser's scrollbar and not a scroll bar on any control.
You can use one of the following depending on whether you want horizontal, vertical, or both scrollbars to be added:
body {overflow-x:scroll;}
body {overflow-y:scroll;}
body {overflow:scroll;}
However, I think if you show the content in a section and then do
#id-of_your_div {overflow:scroll;}
So that you add scroll to the div rather than force the browser to show scrollbars, then your page will provide a much better user experience since such scrollbars are easier for users to access.
You can set the height or width of the body/element to 100.1% depending on which direction and element you want to have scrollable.
Instead of playing with the width, use the code that was intended for this purpose. The following CSS will force a scroll-bar to be present whether it's needed or not.
for both scroll-bars...
body {
overflow: scroll;
}
or just for a horizontal scroll-bar...
body {
overflow-x: scroll;
}