js 框架内laydate因内部滚动导致控件偏移解决办法

问题背景：

根据项目要求，为功能页添加时间控件。最初选用的laydate满足需求，所以就一直使用来着。

最初版本采用laydate页面都比较短，没有过滚动条。

这次时间控件所在位置在页面底端，发现，框架内laydate因内部滚动导致控件偏移......

控件介绍（本段内容来自->传送门)

你是时候换一款日期控件了，而layDate非常愿意和您成为工作伙伴。她致力于成为全球最用心的web日期支撑，为国内外所有从事web应用开发的同仁提供力所能及的动力。她基于原生JavaScript精心雕琢，兼容了包括IE6在内的所有主流浏览器。她具备优雅的内部代码，良好的性能体验，和完善的皮肤体系，并且完全开源，你可以任意获取开发版源代码，一扫某些传统日期控件的封闭与狭隘。layDate本着资源共享的开发者精神和对网页日历交互无穷的追求，延续了layui一贯的简单与易用。她遵循LGPL协议，您可以免费将她用于任何个人项目。

选择理由

layDate除了包含日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，快捷键操作等常规功能外，还拥有更多趋近完美的解决方案。

科学的接口设计1: 她并不提倡API的数量性，而是尽可能呈现最人性合理的接口，减少使用成本。
一流的代码驱动2: layDate完全用原生JavaScript实现，代码采用自由灵活风格，内部封装了众多轻量级的方法引擎，保证了良好的速度体验和接近于零的代码冗余.
人性的皮肤体系3: 她非常注重外观设计，因此她提供了非常强大的皮肤选择支持，不仅官方会提供海量的皮肤下载，您还可以很方便地按照喜好去自定义皮肤，我们非常欢迎您能够贡献皮肤包，具体操作事宜请查看皮肤库页面。

---------这是一条自来水分割线------------

正文

我们平时看到的laydate是这个样子的~

项目是含有上下左右四个框，所以，涉及画面过长时，通常我们看到的滚动条都是在right部分的。这和窗体滚动条是有区别的。

laydate具有良好的稳定性，特别是空间稳定性，它能相对窗体滚动调整位置。但是感受不到框架内部滚动（我尝试过用$('#right').scroll(function(){...})不好使……理论上应该可以？）图如下。

所以尝试了下面的方式进行修改：

1 HTML
2 <input class="w150 laydate-icon fl" readonly="readonly" id="time" onclick="calShow()" value="{$nowTime}">

 1 JS
 2 //面板显示
 3 function calShow() {$('.laydate_box').css('display','block');}
 4     
 5     ! function() {
 6         laydate.skin('default'); //切换皮肤，请查看skins下面皮肤库
 7         laydate({
 8             elem: '#time',
 9             format: 'YYYY年MM月', // 分隔符可以任意定义，该例子表示只显示年月
10              choose: function(dates){ //选择好日期的回调
11              alert(dates);
12               }
13         }); //绑定元素 
14     }();
15 
16 //面板隐藏
17     var main_con = $(".main_con").scroll(function() {$('.laydate_box').css('display','none')});

最初想法是固定面板在输入框下面，随right的滚动条移动。未果……

所以修改成，点击的时候弹出面板，保持原功能不变。在鼠标滚动的时候，让面板消失。遇到的问题是，消失之后再次点击，面板出现在第一次点击的位置。依旧偏移……

找到了laydate的重置面板位置功能------reset()，改写成最后版本：

 1 function calShow() {$('.laydate_box').css('display','block');laydate.reset();}
 2     
 3     ! function() {
 4         laydate.skin('default'); //切换皮肤，请查看skins下面皮肤库
 5         laydate({
 6             elem: '#time',
 7             format: 'YYYY年MM月', // 分隔符可以任意定义，该例子表示只显示年月
 8              choose: function(dates){ //选择好日期的回调
 9              alert(dates);
10               }
11         }); //绑定元素 
12     }();
13 
14     var main_con = $(".main_con").scroll(function() {$('.laydate_box').css('display','none')});

实际上，在我们选择日期的时候，也不会考虑滚来滚去面板是否还在，只要想选择的时候出现就可以。所以，本次修改基本达到了设计目的。

又一个原创文章，给自己赞一个~

这一定还不是最优方法，如果阅读这篇文章有兴趣的朋友可以和我讨论一下~还请赐教嘿嘿

（づ￣3￣）づ╭❤～

如果你觉得本文不错，想要转载，还请希望注明出处~毕竟自己做的不容易~嘿嘿