最近公司在用layui前端框架重构华丹开发平台的前端显示组件。在将div容器的overflow属性设成auto后,发现layui带的下拉框被会挡住,而原生的下拉框则没有这个问题。这主要是因为layui用<dl>模拟的下拉框,源码如下:

<select name="form_col_FORMMETHOD" value="1" nullable="0" datatype="int" itemdesc="表单方法" precision="4" chkmodified="1" maxlength="5" onblur="javascript:Validate.fireCheckValue(event);">

<option value="">--请选择--</option>

<option value="1" selected="">1:post</option>

<option value="2">2:get</option>

</select>

<div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="--请选择--" value="1:post" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">--请选择--</dd><dd lay-value="1" class="layui-this">1:post</dd><dd lay-value="2" class="">2:get</dd></dl></div>

网上搜索相关问题,得到的答案大部分是说把overflow改成visible,但就是要overflow:auto的效果,此法行不通。

总结网上经验,最后经过试验,总算有了个好的解决方案,如下:

首先在自己的样式表中加上:.layui-form-select dl.layui-anim {position : fixed;},将dl的固定方式改为fixed.

然后在页面上填加:

$(document).ready(function(){

$("div.layui-form-select").click(function(){

 var scrollTop=$(document).scrollTop();

 var width = $(this).width();

 var top = $(this).offset().top;

 var left = $(this).offset().left;

 $(this).find("dl").css({"min-width":width+"px", top:top-scrollTop+40+"px", left:left+"px"});

 });

 //滚动或是改变窗口大小,弹开的下拉框不会跟随滚动,因为在滚动或窗口改变时,缩回下拉框。

 $(document).scroll(function(){

$("div.layui-form-select").removeClass("layui-form-selected");

 });

 $(window).resize(function(){

$("div.layui-form-select").removeClass("layui-form-selected");

 });

});

通过上述方法,效果基本OK,有些细节还需优化,大家可以在此基础上自行优化。