网站首页 > 基础教程 正文
使用my97日期选择控件的时候,如果整个页面是有滚动条的,根据触发显示日期的控件的父控件的position不同会显示不同的情况
1、position不为fixed则滑动滚动条,显示的日期层不会出现异常位移,如下图
滚动条不动,正常显示
滚动条没去,正常显示
2、position为fixed则滑动滚动条,显示的日期层会根据滚动条的移动而移动,如下图
滚动条不动,正常显示
滚动条滑动,异常位移
对于第二种情况解决方法如下:
写一个方法 如下:
function showDate() {
$('iframe[hidefocus]').parent().hide();//用于强制重新计算坐标值
new WdatePicker();
var scrollTop = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);//滚动条的偏移值
var oldTop = $('iframe[hidefocus]').parent().css('top').replace('px', '');//日期控件最终计算的top值
var newTop = oldTop - scrollTop//日期控件的top值减去滚动条的偏移值就是当前日期控件的位置
var iCount = 0;
//下面用setInterval 主要是为了第一次加载的时候 top 设置会先于WdatePicker完成
var intHandle = setInterval(function () {
var top = $('iframe[hidefocus]').parent().css('top').replace('px', '');
iCount++;
if (iCount < 10) {
$('iframe[hidefocus]').parent().css({
'position': 'fixed',
'top': newTop
});
}
else {
clearInterval(intHandle);
}
}, 100);
}
触发的控件的onclick事件直接调用 此方法,完成页面html和调用代码如下
<h2>Index</h2>
<div style="height: 1000px; background-color: yellow">
</div>
<div style="position: absolute; top: 50%; left:50%; background-color: blue;">
<input type="text" class="form-control" onclick="showDate();"/>
</div>
<script src="~/Scripts/plugin/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
function showDate() {
$('iframe[hidefocus]').parent().hide();//用于强制重新计算坐标值
new WdatePicker();
var scrollTop = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);//滚动条的偏移值
var oldTop = $('iframe[hidefocus]').parent().css('top').replace('px', '');//日期控件最终计算的top值
var newTop = oldTop - scrollTop//日期控件的top值减去滚动条的偏移值就是当前日期控件的位置
var iCount = 0;
//下面用setInterval 主要是为了第一次加载的时候 top 设置会先于WdatePicker完成
var intHandle = setInterval(function () {
var top = $('iframe[hidefocus]').parent().css('top').replace('px', '');
iCount++;
if (iCount < 10) {
$('iframe[hidefocus]').parent().css({
'position': 'fixed',
'top': newTop
});
}
else {
clearInterval(intHandle);
}
}, 100);
}
</script>
最终显示结果如下,日期显示框没有位移
猜你喜欢
- 2024-11-10 好程序员web前端教程分享前端 javascript 练习题
- 2024-11-10 好程序员分享javascript中的常见的兼容写法
- 2024-11-10 利用这个css属性,你也能轻松实现一个新手引导库
- 2024-11-10 【前端】两种视口的故事(一) 视口定义在哪个标签中
- 2024-11-10 如何区分clientX、clientY、pageX、pageY、offsetX、offsetY……
- 2024-11-10 BetterScroll源码阅读顺便学习TypeScript
- 2024-11-10 如何成为别人嘴里的高级前端工程师?
- 2024-11-10 Vue实战065:ScrollBehavior实现路由记录滚动行为
- 2024-11-10 布局视口,视觉视口,理想视口 布局与视口的概念
- 2024-11-10 页面被卷去的头部兼容性问题 昌邑市青龙山
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)