1

I'm doing all of this to modify an already existing website using an extension called Stylus. Also, I'm doing this on Android. I use a browser called Kiwi Browser. It supports extensions.

I'm trying to make an element that sticks to the right of the screen so as to hide the scroll indicator on Android.

This is what I meant with that scroll indicator

I can't hide that with ::-webkit-scrollbar {display: none} or any variation of it because that element seems to be part of Android. My current solution is to add border-right: 5px solid gray !important to the body element or any element where that would work.

It looks like this.

I exaggerated the width there a bit so it'd very visible. With that border in place, the scroll indicator becomes invisible or unnoticeable because it has the same color as the border. Now, my problem is that when I zoom in on the page, especially on the very left part of the page, that scroll indicator is noticeable again. That's why now I want to try using ::after. I'm trying to create an element that will stick to the right of screen even if I zoom in. I also don't want it to float. I want it to occupy space so that the content of the page will resize. I tried this code (which I also found here on stack) but it didn't work:

body::after{
  content: " ";
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;
  right: 0;
  background: gray;
  height: 100%;
  width: 10px;
  z-index: 9999 !important;
}

I use Kiwi Browser to read manga and comics. And the reason I want to hide that scroll indicator is because when you touch any part of the screen, that indicator appears and I can see how much is left from what I'm reading and that really ruins the mood for me.

Edit:

It seems that half of what I want to accomplish is not possible with just CSS. For reference: Prevent that a fixed element resizes when zooming on touchscreen

ackunsicy10
  • 11
  • 3
  • 1
    Does this answer your question? [Hiding the scroll bar on an HTML page](https://stackoverflow.com/questions/3296644/hiding-the-scroll-bar-on-an-html-page) – Asteroids With Wings Jul 04 '20 at 14:52
  • As far as I am aware, the scrollbars on mobile browsers go on top of everything, so putting something there won't help much. – corn on the cob Jul 04 '20 at 14:53
  • @AsteroidsWithWings Nope, that scroll indicator element can't be hidden with CSS because it's part of the browser app. What I'm trying to do here is mask that with another element so that it would be unnoticeable. Kind of like camouflaging it if that makes sense. – ackunsicy10 Jul 04 '20 at 14:55
  • @sven Yeah, but if I put an element under it that has the same color as it then it wouldn't be noticeable anymore. – ackunsicy10 Jul 04 '20 at 14:56
  • @ackunsicy10 I know it's part of the browser app. Did you try it? It's possible mobile browsers now prevent this override, but this was historically the canonical approach to styling or hiding scrollbars, and it's much simpler than your approach. – Asteroids With Wings Jul 04 '20 at 15:01
  • @AsteroidsWithWings Yeah, I've tried it. It only works for the scrollbars on desktop. – ackunsicy10 Jul 04 '20 at 15:07
  • @ackunsicy10 Okay good to know. – Asteroids With Wings Jul 04 '20 at 15:09
  • Wait... do you really need to get rid of scrollbars? They're quite useful on mobiles, so sometimes you should keep them. Also, a giant grey thing down the side of the screen is a bit curious on most websites. – corn on the cob Jul 10 '20 at 13:07
  • @sven Aside from indicating how much content is left from the page, there isn't much use to those scrollbars. Also, It's only for personal use. – ackunsicy10 Jul 12 '20 at 17:11
  • Ok, that's fair enough, but I'd still suggest keeping it there on any big websites. – corn on the cob Jul 13 '20 at 07:19

0 Answers0