CSS scrollbars hiding issue on desktop and mobile

Question

I am trying to hide the vertical scrollbars using the classic method of creating an outer container /w hidden overflown and an inner container with negative margin like so:

.Wrapper {
    width:100%;
    height:100%;
    overflow:hidden;
}

.Items {
    display:block;
    margin-right:-17px; /* Scrollbar's width */
    overflow-y:scroll;
    overflow-x:hidden;
}

Indeed the scrollbars are hidden when i view them on desktop / laptop.

Unfortunatelly i found out that touch mobile devices (phones / tablets) do NOT display scrollbars. Instead when you touch scroll a small scrollbar pops up. The problem is those scrollbars do not add any extra width like the scrollbars on desktop do (17px) so i end up with my negative margin pulling outside the borders and hiding 17px of its content.

I also tried to absolute position the inner container .Items but i got the same results :(

.Items {
    position:absolute;
    top:0;
    left:0;
    right:-17px;
}

I was thinking to do some browser sniffing so i can remove the negative margin when the user views the webpage from a mobile device but i know its a bad practise.

Is there any way to fix it with pure CSS?

Problem preview

Answer 1

You can define style for small viewports via @media query. You need to add next code in the end of your css rules:

@media screen and (max-width: 992px) {
   .Items {
       position:absolute;
       top:0;
       left:0;
       right: -17px;
       overflow-y: scroll;
/* any style in this section will afect on Items
   on mobile and tablets with screen width less than 993px*/
   }
}