Web 页面在移动端的交互体验，怎样才能做到或接近客户端原生的交互效果呢？

[skyshy]

最近在做一个比较简单的页面，但有些交互一直体验不是很好。在实现需求上，从技术角度来讲，毕竟需要花费一些时间需要处理。然而总有不懂的非技术人员质疑和吐槽说，一个简单的页面需要那么多时间开发吗？当是这是另外一个话题啦。

以下是最近遇到的两个问题（当然还有其他很多其他交互）

1.粘性或固定元素

某个元素固定在视图的顶部或底部，有时需求需要上滑隐藏、下滑出现。

一开始使用 fixed 定位，后面用 sticky 替换，但存在一些兼容问题，再说有些 App 内部的 webview 也存在一些瑕疵兼容。

另一方面，页面的事件监听使用，scroll 和 touchmove 事件，也考虑到 debounce 去抖等优化。最终交互效果还是因为交互累加和兼容处理，变得越来越复杂。

2. 水平滚动

一些 Tab 元素组合，分别对应下面以垂直方式布局的卡片 Card

• 点击某个 Tab 元素，页面滚动到对应的卡片区域
• 同时，手动滚动页面时，视图里最多展示的卡片区域与 Tab 选择状态一致，选择的 Tab 也必须在视图内（水平方向有可能有滚动条）

由于 Tab 元素比较多，并以水平方向排列，所以会有水平滚动的交互。要完成以上 Tab 和 Card 在页面里的交互体验，似乎还是很难比上原生的效果。

当然有做了一些兼容处理，比如 对水平滚动区域添加-webkit-overflow-scrolling: touch;等。

以上是最近小弟遇到的两个坎坷，如何做到或接近客户端原生的交互效果呢？

当然在这里只是希望问问各位前辈，在处理以上两类问题时，有什么好的经典交互案例提供参考？以及一些兼容问题和处理方式？让小弟在处理此类问题上少走些弯路。