ios和android的兼容问题

backgroundAttachment

问题背景

选座页的背景图片不随着内容滚动而更改位置（android可以，ios14.0以上不行，具体没测试）

解决方案

1. 给需要滚动的元素加上 position: 'relative'

2. 设置子元素，给子元素加上 绝对定位并设置样式

Date 时间字符串

问题背景

在苹果的 Safari 浏览器上 YYYY-MM-DD hh:mm:ss 格式的时间出现的 NaN

解决方案

1. 更换格式： 将 YYYY-MM-DD hh:mm:ss 更换成 YYYY/MM/DD hh:mm:ss 的格式

const timeString = '2022-10-20 14:30:00'

const timestamp = new Date(timeString.replace(/\-/g, '/')).getTime()

console.log(timestamp); // 1666247400000

2. 使用第三方时间库。如 moment

const timeString = '2022-10-20 14:30:00'

const timestamp = moment(timeString).valueOf()

console.log(timestamp) // 1666247400000

ios上面的橡皮筋效果

解决方案

查了一些资料，都有一些坑。 以 touchmove 禁用默认时间为例，会导致带 scroll 的元素无法滚动。针对滚动元素使用 event.stopPropagation() 阻止事件冒泡，滚动条的元素是可以滚动了，但滚动的同时依然会触发页面滚动。这就好像元素的滚动和页面的滚动处理都放在了一块，很难通过 event 区分开。 可以参考链接 谈橡皮筋特效的解决方案 (opens new window)