Mouse peripheral causes the styling of the scrollbar to change - javascript

Mouse peripheral causes the styling of the scrollbar to change. How do I prevent this from happening or change the background color of the scrollbar box so that it matches the rest of my site?
This is the desired effect when I have scrollable content:
Without Mouse Plugged In
This is the undesired effect when I have scrollable content with a mouse plugged in:
With Mouse Plugged In
Here is a link to code that models the scrollable portion in question:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
I'm experiencing this issue my Macbook Pro (I haven't done any testing on a Windows device.) I'm looking for a solution that works in Safari, Firefox and Chrome.

Related

reducing the component's height when the soft keyboard is visible in React/Next

when I try to make a Next/React project in which I have an invisible input.
Almost the whole page is my label for that input.
when I use my mobile browser and the soft keyboard appears it forces the page to be scrollable which interferes whit my design
I want to either adjust the size of the page so that the
height(page)+height(keyboard)=height(screen)
or
make the whole page unscrollable.
I don't know why but it is scrollable in Brave browser but not in Opera GX browser
I want it like it is on Opera GX.
I tried setting the overflow of html, body & #__next to "hidden"
but that didn't work.
You can see what I am talking about on my website: phew

Sidebar menu doesn't show on Safari/IOS

I have a fixed position navbar, and buttons that open a sidebar menu on mobile. Only on IOS and Safari the sidebar doesn't show when you click on cart or account. Obviously, it's some sort of compatibility issue, but how can I work around or fix this?
https://walkpop.com/
I've seen some other threads on StackOverflow say its because Webkit translate doesn't work inside a fixed position parent, so I removed translate all together from my code to avoid rearranging the HTML. Right now I'm using JS to change the left values from -10000px to 0 on click.
This was the code given to me, and it's a pain to rearrange the HTML because of the styling attached to everything.
On desktop and Android, the website works completely fine. Only on IOS and Safari does the sidebar pull out, but you can only see the top bit of the sidebar.
Here is an image of the issue on IOS
This issues was caused because the parent element had a overflow: hidden; attribute. For some reason it was only hiding the sidebar on IOS. Once I removed that line, everything was fixed.

HTML text input breaks positioning on Iphone 6/7 plus

I try to find some workarounds for mobile safari bug:
For example I have a clear html page with
Viewport settings width=device-width, noscalable
Body with position:fixed
Two HTMLInputs created by js and placed to center of screen
All works fine on ever devices but on Iphones 6 plus and 7 plus we have a great problem:
If I've focus input and then hide keyboard, all window positioning become diverged from rendered position. Input could be only focused if I've click ~100px higher of it visible position. Moreover, each additional elements on page (even canvas with webgl content) also will get wrong coordinates on each tap/touchstart and so on.
I've connect iphone for debug, and I can see that browser thinks that input placed not where it rendered. Also i can vertically scroll page with finger, and real rendered inputs will stay in place, but area from browser will moves up and down right up to his rendered position.
Bug could be reproduced only if few tabs opened in browser in landscape orientation (i'll highlight tabs red on screenshot).
Can't reproduced on iphones5-6, because there is no tabs, but also can't be reproduced on ipad, which has the same tabs.
Example is here: http://baker-feather-16713.bitballoon.com/
Problem is the fact that safari allow user to scroll page to fullscreen ever if you set html/body width and height to 100%. So, when keyboard showed content scrolls up despite that body has position "fixed" and it rendered with bug when keyboard becomes hidden.
Solution is very simple: just need to do scrollTo(0, 0) when keyboard hidden, e.g.:
document.addEventListener('focusout', function(e) { window.scrollTo(0, 0) });

jScrollPane on touch devices - drag button is in reverse

I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.

Android scrolling inside HTML containers, which has a CSS overflow property

I have a container on a page, which has has a huge overflow-x. On a iPad, the user can simple swipe-scroll left, just like they would do vertically when scrolling down the page.
On a PC, scrollbars are visible so the user can scroll left and right.
However, on the Android, no scroll bars appear and I can't swipe left like I can on the iPad.
Is some special CSS and JS needed here? Does anyone know why this happens?
The overflow property is not working properly in Android devices before Android 3.0. But it is solved from the Android 3.0 or later.
I also had this issue while I was developing an application.
This issue was solved by using a button and animating the element's margin-top property so that it is changed to negative value, therefore creating a scroll effect.

Categories