CSS scroll snap points 怎么用特征检测是否支持

2016-07-16 11:19:30 +08:00
 yangg

写了个 demo,关于 scroll snap points 的,滚动的时候自动定位到一项中间

目前只有 Firefox 和 iOS 的 Safari 和 Chrome 支持,我有 js 使用来检测是否支持

  function isSupport(attr) {
    return ['', 'webkit-', 'ms-'].some(function(prefix) {
      var prefixed = (prefix + attr).replace(/-([a-z])/g, function(_, $1) { return $1.toUpperCase(); });
      return prefixed in document.documentElement.style;
    });
  }
  var isSupport = isSupport('scroll-snap-type') && isSupport('scroll-snap-coordinate');

可是在微信和 qq , Segmentfauls 内置浏览器里检测出来是支持,实际效果却出不来, 这种能利用特征检测出来么?或者问题出在哪里了?

https://uedsky.com/demo/css-scroll-snap-points.html

1833 次点击
所在节点    问与答
3 条回复
yangg
2016-07-19 15:24:04 +08:00
这里有前端给看看呗?
xxxyyy
2016-07-25 14:41:53 +08:00
css 的特性检测,在 js 里可以使用 CSS.supports ,在 css 里可以使用 @supports

至于在微信中没效果,由于没用 iPhone ,就不太清楚了,估计是 UIWebview 的祸吧 :)
yangg
2016-07-25 15:08:22 +08:00
@xxxyyy CSS.supports 试过也是 true, 也检测不出真实情况
webview 最杯具的是国内的 qq ,微信, segmentfault 全挂,我试了 medium 和 twitter 别人都可以。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/292844

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX