I've noticed on Ubuntu and OSX (when an external mouse is used) that there is a settings to always show scrollbars on a page. When they are showing like this it makes our site look awful as the scrollbars do not agree with our colour scheme and they take up valuable space. The default setting on OSX of hiding scrollbars until you scroll works very well for us.
Is there any way we can disable or improve upon this in the browser?
This is an OS-level setting that applies to every scrollable content window, not just web browsers.
Is there any way we can disable or improve upon this in the browser?
I don't think so. If you're seeing scrollbars on elements inside your page (not just on the right side of window) then you may want to adjust your overflow/layout CSS on those elements.
Related
I'm having an issue with scrolling being somewhat temporarily disabled on mobile iOS devices within a fixed position element. The issue is somewhat described (but not answered) here: iOS scrolling with fixed position
I've searched everywhere, but it seems my issue is somehow unique, as none of the solutions helped (such as setting the elements to absolute instead of fixed, or setting -webkit-overflow-scrolling to touch. I've tried all solutions posted here: Scrolling issue on position fixed element on iOS)
The website I work on is currently live with the issue, so I can easily provide a codebase to test: https://finanztip.de
If this page is opened in an iOS device (all other browsers and OS's are fine), when the navigation is opened and scrolled (usually I can reproduce it by scrolling to the bottom of the container and attempting to scroll back up), sometimes (not always) the scrolling is disabled and the user can't continue scrolling for a while.
I assume it has something to do with the scrolling context. The iOS device is trying to scroll in another element/context other than the one I need it to scroll in, and while it attempts to scroll somewhere else, it doesn't scroll in the context I need it in (in my case I want the div with the class "vertical-scroll-container" to be scrollable). If I remove the class "vertical-scroll-container", it scrolls just fine.
I have a video of the issue, but I can't upload it to stackoverflow, so I'll send it to anyone interested, or I might upload it somewhere and link it.
I'm not sure if I provided enough information to understand my situation. In case something's missing just let me know.
EDIT: Here's the video: https://www.dropbox.com/s/wh4oe99f5tlxzjs/ios-scroll-issue.MOV?dl=0
I have a div with a vertical scrollbar containing mixed content. Some plain text, images, tables, some other visual markup.
There seems to be a couple of points scrolling down the page where it gets "stuck" in Chrome (also tested Firefox, it seemed slightly slower at that point, but not broken), with the scroll wheel or up/down arrows only moving a couple of pixels at a time. I have no listeners for the scroll events on this page.
How do web browsers decide how fast to scroll at various points when dealing with mixed/complex content?
I suspect this could be a performance issue with the rendering of components. I recommend using the Timeline feature in Chrome Developer Tools to capture the performance information and go from there.
I'm working with a webview this time. I've got a strange behaviour here.
The overflow-x is set to hidden, and works just fine on browsers. But when it comes to any mobile device, it doesn't respect the overflow at all.
http://www2.madeinweb.com.br/jobs/adc/prototype/html/
This is the URL of it. If you try to open the menu, it will work as intended. But I can scroll the content I placed left. That doesn't happen on browsers.
I know I can fully disable scrolling with jQuery, but I can't find a proper way to disable just horizontal scrolling.
Any tips over it?
I've managed to tweak it out with touchmove. thanks no one for the answer
I have a weird one: on my site http://tustincommercial.com some pages are aligned slightly differently from others, giving a jumping effect.
Compare http://tustincommercial.com vs http://tustincommercial.com/who-we-are to see the effect.
The markup is identical, apart from the content in the middle. The same CSS is being applied.
Now, the real killer is that this difference disappears when developer tools are open. All browsers (IE8, Chrome, Safari, Firefox, Opera) show the difference when developer tools are not open. None of them show the difference when their developer tools are open.
Any ideas on the best way to find and fix the source of the difference?
The issue comes from the scrollbar appearing when your content goes past the bottom of the window. When the developer tools are open all pages need to scroll, so the jump disappears.
There are a few ways to fix this, but I currently can't tell you what would be best for your site. You could make it fixed width, you could try using max-width, or you could force the scroll bar to always be present:
html {
overflow-y: scroll;
}
Hi I want to disable the resizing the html web page by the user. How to do that
I want to disable the resize button and manual resizing by dragging. pls help
You can't, thank God.
When you open a new popup you can request it be unresizable using the feature resizable:
window.open('something.html', '_blank', 'resizable=no');
however modern browsers may ignore your request as it is considered egregiously user-hostile.
Use liquid layout to make your page respond flexibly to changes in window size, rather than attempting to set it in concrete. The web is inherently a variable-size medium, and mobile browser users get no input in how large their screen is anyway.
Pardon? Are you talking about resizing the browser window? If that's the case then you can't do this in HTML, or JavaScript as it would be a security risk allow web pages to control browsers behaviour.
If you want to get rid of scroll bars you can set the body tag to 'overflow: hidden' in CSS?
If you mean to stop the page shrinking and expanding in sympathy with browser window size, then use fixed width elements as supposed to relative (%)