解决Laydate在手机无法滑动问题

前言

Laydate选择时间模块在手机使用时需要先手动在框里点击一下的问题在一年前困扰我和学长许久（都是这方面的强迫症，没办法）。记得去年有一次（不止一次尝试解决这个问题）我独自尝试用js的focus等事件通过条件对焦的方法调试了一晚上，看着眼花缭乱的父子DOM结点变化而无法在互联网上查阅到任何一种有效监听方法的绝望仍然记忆犹新。

为减小Laydate的兼容性bug对请假系统项目体验的不良影响，学长在项目中写了前端代码通过增大可选时间跨度以及根据当前时间展示可选范围。

然而我们当时万万没想到的是：正确解决这个前端问题的方法竟然是两行CSS代码。

分析

既然JavaScript无从解决，那就从CSS下手：

分析到时间选择列表ol对应的overflow属性值为hidden，其作用包括溢出隐藏、清除浮动和解决外边距塌陷（点击查看详情）的意思，其中触发visible的默认条件是hover。然而手机端触发hover必须得点一下，而PC端只需将光标移上即可。

因此，只需修改overflow对应的属性即可完美解决问题：

/* 允许手机端laydate选择时间时上下滑动 */
.laydate-time-list ol{
    overflow-x: hidden !important;
    overflow-y:auto !important;
}

目前，该解决方案已部署于我的毕设和学生请假系统git项目及正式环境中。

总结

通过今天晚上（昨天晚上今天凌晨）在请假系统项目的实战中对CSS和汉字编码有了更深一步的理解。

参考资料：

https://www.php.cn/css-tutorial-412426.html

https://www.w3school.com.cn/tags/tag_ol.asp

https://blog.csdn.net/boysky0015/article/details/72824172

https://blog.csdn.net/Start2019/article/details/116226021

https://blog.csdn.net/qq_41638795/article/details/83304388

版权属于：soarli

本文链接：https://blog.soarli.top/archives/639.html

转载时须注明出处及本声明。