防止MacOS触控板用户在WebKit/Blink中隐藏滚动条

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (23)

WebKit/Blink(Safari/Chrome)自10.7(MacOSXLion)以来在MacOS上的默认行为是在用户不使用时隐藏滚动条。

例(小提琴)

HTML

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

CSS

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

WebKit(Chrome)

普雷托(歌剧)

如何强制滚动条始终显示在WebKit中的可滚动元素上?

提问于
用户回答回答于

滚动条的外观可以用WebKit的-webkit-scrollbar伪元素。可以通过设置以下方法禁用默认外观和行为-webkit-appearancenone.

因为要删除默认样式,所以还需要自己指定样式,否则滚动条将永远不会出现。以下CSS重新创建隐藏滚动条的外观:

例(小提琴)

CSS

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
} 

WebKit(Chrome):

用户回答回答于

对于一个单页Web应用程序,在其中动态添加可滚动部分,通过编程方式向下滚动一个像素并备份,触发OSX的滚动条:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

这就触发了视觉信号的消失。

扫码关注云+社区