As of 2014-10-22, the header part of a core-scroll-header-panel widget is drawn over the top of the browser's scrollbar. This is deeply suboptimal, as it can make the thumb completely inaccessible until you scroll down. (And first you have to notice there's a scroll bar.)
The standard Polymer demo for the widget demonstrates this:
https://www.polymer-project.org/components/core-scroll-header-panel/demo.html
This happens in both Chrome and Firefox.
Does anyone know of a workaround?
Related
I'm aware of this question, but it seems to address a different issue.
In my case, scroll snapping doesn't always work together with anchor links (or the scrollIntoView method) only when the scroll box is html (and not body or main or some other container). I have an iPhone XR with iOS 16.
Here is a CodeSandbox to easily test on the phone. (I didn't include a code snippet in the post, as this is best to be experienced full screen, on the phone.)
When I make another container the scroll box, scrolling 'away' the address bar in Safari doesn't work anymore, and since I like this feature, I'd prefer to have html being my scroll box.
Is this really a bug or am I doing something wrong?
I've seen a similar question but it's quite different.
I have a div that i want scrollable. It works fine in Chrome and Firefox but doesn't work in Safari. At least it doesn't work when i load the page. I have to resize the window or zoom in/out the page for the scroll to "unlock". This only affects mouse wheel scrolling. The traditional drag scrolling works well.
The test site is here: http://dmd.esad.pt/e512/final/index.html
I solved it with $(window).load function and with help of malihu's jquery custom content scroller but i believe i could just use a simple .load
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 the content of my website in an absolute positioned div that fills the whole screen. The scrolling on this div is normally clunky, as it's not the native momentum scrolling. Solution? Append -webkit-overflow-scrolling: touch; to the div.
Momentum scrolling works now, but when I scroll down the page, the div elements aren't showing up. The console shows no errors, nothing is wrong with the actual page, but the individual posts (the div's) don't show. Here's an example:
Can anyone confirm this on their iPad, or suggest a fix? I'd rather not use something along the lines of Scrollability. It might be that the iOS6 beta is causing this, but I'd like to be reassured.
You can view this site on your iPad
And if anyone wants me to explain my bookmarks, I will gladly do so.
Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.
This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR
Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging
Unable to scroll pages vertically on Google Chrome "12.0.742.100", using the scroll-bar thumb, however I can use mouse scroll and also scroll the page using the up and down arrow keys.
Important points:
If I re-size the window such that there is a horizontal scroll-bar, the vertical scroll-bar starts to works fine, but if I re-size/there is no horizontal scroll-bar, the vertical scroll-bar thumb fails to work.
If I stop loading the page/try to scroll while the page is loading, it works fine.
The issue is reproducible on almost all the pages of my client's website "http://www.charlotterusse.com/", like:
http://www.charlotterusse.com/home/index.jsp
http://www.charlotterusse.com/category/index.jsp?categoryId=4078197
http://www.charlotterusse.com/family/index.jsp?categoryId=4335463&cp=4078197
http://www.charlotterusse.com/category/index.jsp?categoryId=4238904
http://www.charlotterusse.com/category/index.jsp?categoryId=4238909&cp=4238904
but, the following pages scroll just fine:
http://www.charlotterusse.com/sitemap/index.jsp
https://www.charlotterusse.com/checkout/index.jsp?process=login
http://www.charlotterusse.com/helpdesk/index.jsp
http://www.charlotterusse.com/storeLocator/index.jsp
http://www.charlotterusse.com/giftCenter/index.jsp
It may be due to some conflict with Flash or JavaScript, but the site works fine on all other browsers and not chrome.
Please advice what could the issue be and how can it be fixed.
Ultimately found the solution for this issue. There was a JS code which was hindering the normal mousedrag actions.