Prevent defaults using CSS

Question

I have used the following CSS code (from SO) to display scroll bar in safari (mobile view).

.myScroll {
    display: inline-block;
    height: 100px;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

::-webkit-scrollbar-track {
    background-color: rgba(240,240,240, .6);
    border-radius: 8px;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}

::-webkit-scrollbar{
    -webkit-appearance: initial;
}

Now I want to see the default scroll bar in desktop view. What should I add to my desktop CSS code?

P.S. I'm not supposed to use media queries in CSS. I already have different CSS files for different resolutions.

I'm using media queries, but styling for mobile view reflects in desktop also. :) — Green Wizard, Jan 09 '14 at 14:20
So you're using wrong media queries. Give us the whole source. — , Jan 09 '14 at 14:23
« *not supposed to use media query in css. I already have different css files for different resolutions* » — how are you doing this? Without showing us how you're doing it, we can't tell you how it's going wrong. — Barney, Jan 09 '14 at 14:26
`I already have different css files for different resolutions.`...sounds like media-query concept to me.....clear your head dude...whats your requirement!! :) — NoobEditor, Jan 09 '14 at 14:28
Your solution is wrong. Your solution creates a few HTTP requests, instead of only one. You should combine your CSS files into one file. — , Jan 09 '14 at 14:30
i'm using scss where i have a file which imports scss files of different resolutions using media queries. I'm not supposed to use media query now in resolution scss. — Green Wizard, Jan 09 '14 at 14:31

Itay Gal · Answer 1 · 2014-01-09T14:22:00.387

0

use @media (max-width: 640px) or other width value and use you css inside it:

@media (max-width: 640px){
     your css code here
}

Note: you should also use

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

edited Jan 09 '14 at 14:22

answered Jan 09 '14 at 14:20

Itay Gal

10,706
6
36
75

Thanks but Sorry, i forgot to mention. I'm not supposed to use media query inside css. – Green Wizard Jan 09 '14 at 14:22
@Wisam : then why you mentioned `I'm using media queries, but styling for mobile view reflects in desktop also.`???? – NoobEditor Jan 09 '14 at 14:24
@Wisam actually, you are — it's the only place you can use them. – Barney Jan 09 '14 at 14:24
`initial-scale` should be `1`, `.0` is redundant part. – Jan 09 '14 at 14:25

NoobEditor · Answer 2 · 2014-01-09T14:25:49.987

0

Since your requirement is desktop, I suggest using media queries, targeting height of the viewport because landscape mode way conflict the width for iPad and laptop.

Something like:

@media screen and (min-width: 1024px) , screen and (min-height: 768px) {
   /* styles here */
}

edited Jan 09 '14 at 14:25

answered Jan 09 '14 at 14:22

NoobEditor

15,563
19
81
112

score 0 · Answer 3 · answered Jan 09 '14 at 14:23

You say « styling for mobile view reflects in desktop also. :) », but that's not strictly true — people mostly use max-width or min-width statements in their media queries (which will take effect depending on browser viewport size), but you can also use max-device-width and min-device-width. When you decide a device is a desktop is still difficult: media queries alone can't tell you whether a device is portable. But size is half the battle:

@media (max-device-width: 640px /* or whatever you decide on */ ){
     /* fancy scrollbars */
}

Prevent defaults using CSS

3 Answers3