Question

我使用了以下CSS代码（from SO）来显示safari中的滚动条（移动视图）。

.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;
}

现在我想在桌面视图中看到默认滚动条。我应该在桌面CSS代码中添加什么内容？

P.S。我不应该在CSS中使用媒体查询。我已经有不同的CSS文件用于不同的分辨率。

Answer 1

使用@media (max-width: 640px)或其他宽度值并在其中使用css：

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

注意：您还应该使用

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

Answer 2

由于您的要求是桌面版，我建议使用媒体查询，定位视口高度，因为横向模式方式会影响iPad和笔记本电脑的宽度。

类似的东西：

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

Answer 3

你说«移动视图的样式也反映在桌面上。：）»，但这并非严格正确 - 人们大多在他们的媒体查询中使用max-width或min-width语句（这将根据浏览器视口大小生效），但您也可以使用max-device-width和min-device-width。当您确定设备是桌面时仍然很困难：单独的媒体查询无法告诉您设备是否可移植。但规模是战斗的一半：

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

使用CSS防止默认值

3 个答案: