如何获得基于DIV的下拉列表来获得滚动条，而不是使用JavaScript和CSS扩展屏幕末端?支柱也涉及

Question

我有一个动态填充的基于DIV的下拉列表，当客户将大量条目放入其中时，它将延伸超过屏幕的末端，从而隐藏了较低的条目。它在一组数据输入行（TD元素）中的一列上，因此可用的空间在输入哪个行上有所不同。

不幸的是，这是我继承的一个应用程序，没有任何帮助，并且没有真正的技能可以维护的技能，因此我很喜欢"解释我五岁"。另外，我对文字墙表示歉意。

通过广泛的谷歌搜索和对应用程序中的其他代码的检查，我相信选择选项可以解决这个特定问题，但是当选择值更改时，我需要启动一个函数以设置其他数据，并且还没有找到一种方法通过选项取消。

不幸的是，这件事太大了，无法发布，如果我试图将问题包装在独立的情况下，我可能会策划它，所以这是我 Think think 是相关的代码。

div

<div class="empform">
<html:form action="/processBlank">
<div id="divJobClass" style="visibility: hidden; position: absolute; height="50px"
 border-color: #fff; border-style:solid; border-width: 1px; background: white; opacity: 1">
    <table id="tableJobClass" cellspacing="0" style="border-color: #9090ff; border-style:solid; border-width:1px;" cellpadding="0"> <%
ctr = 0;
for (JobClassVO jc : jcList) { // href="setJC(<%=jc.getGuid()% >, '< %=jc.getJcIdDesc()% >')"  %>
    <tr><td><input style="border: none; background: white"  type="text" 
        id="jc<%=ctr%>" size="50" value="<%=jc.getJcIdDesc()%>" readonly="readonly"
        onclick="setJC(<%=jc.getGuid()%>, '<%=jc.getJcIdDesc()%>', <%=ctr%>)"
        onkeydown='jcListCheck(event);'></td></tr><%
ctr++;
}
%>

下拉列表通过单击字段

触发的位置

<td>
        <html:hidden name="erfEmployee" property="jcGUIDString" indexed="true"/>
        <html:text name="erfEmployee" property="jcId" indexed="true"
            size="8" maxlength="25" onblur='<%= "isLastRow('JobClass', " + count + ");" %>'
            onclick='<%= "showJcList(" + count + ");" %>' 
            onkeydown='<%= "jcCheck(event," + count + ");" %>'
            onchange='<%= "verifyHoursClass(" + count + ");" %>' readonly="true" />
</td>

Islastrow，Jccheck和Onchange与外观无关。用于使DIV出现的功能

function showJcList(index) {
    var fld = elem("erfEmployee[" + index + "].erfEeSsnFormatted");
    if (fld.value == "")
        return;
    var div = elem_("divJobClass");
    jcGuidTarget = elem("erfEmployee["+index+"].jcGUIDString");
    jcIdTarget = elem("erfEmployee["+index+"].jcId");
    showList(jcIdTarget, div, jcGuidTarget);
    focusSelected("jc", null, <%=jcList.size()-1%>);
}
function showList(idTarget, div, guidTarget) {
    ddDiv = div;
    if (ddDiv.style.visibility == "visible") {
        ddDiv.style.visibility = "hidden";
        return;
    }
    var iTop = 0, oNode = idTarget, iLeft = 0;
    while(oNode.tagName != "BODY" && oNode.tagName != "HTML") {
        iTop += oNode.offsetTop;
        oNode = oNode.offsetParent;
    }
    oNode = idTarget;
    while(oNode.tagName != "BODY" && oNode.tagName != "HTML") {
        iLeft += oNode.offsetLeft;
        oNode = oNode.offsetParent;
    }
    ddDiv.style.left = "" + iLeft + "px";
    ddDiv.style.top = "" + (iTop + idTarget.offsetHeight) + "px";
    ddDiv.style.visibility = "visible";
    ddIdTarget = idTarget;
    ddGuidTarget = guidTarget;
}

我搜索的几个网站建议溢出：自动和设置尺寸，但这似乎并没有改变任何东西。也许我弄乱了设置尺寸？但是在我看来，固定的尺寸无济于事，因为可用空间取决于要输入哪个行。我发现溢出：滚动给了我水平和垂直的滚动条，但是栏只是随屏幕末端的div伸展而延伸。我已经考虑试图弄清楚剩下多少空间，并使Div看起来足够适合，但我认为这很丑陋。如果需要的话，我会去那里。

任何提示，帮助，对想法的指示将不胜感激。谢谢。

Answer 1

这是编写扩展小部件时的常见问题。

您只需要

1. 将所需的max-height设置为元素;
2. 设置 overflow-y: auto以指示仅在需要时添加滚动条;
3. 使用JavaScript，计算元素的top位置以及元素的height是否高于 fiewport 的height（窗口的可见区域）；
4. 如果它溢出，那就做点什么。通常，通常的行为是颠倒下拉的方向，使其从父元素的底部开始，向上生长。

查看使用jQuery制造的 JSFIDDLE示例（为方便起见）。调整窗口的大小，看看溢出的元素会发生什么。

或仅运行以下代码段：

$(".dropdown li").on('mouseenter mouseleave', function(e) {
  var submenu = $('ul:first', this);
  var submenuTop = submenu.offset().top;
  var submenuHeight = submenu.height();
  var viewportHeight = $(window).height();
  var isOverflowing = (submenuTop + submenuHeight > viewportHeight);
  if (isOverflowing) {
    submenu.css("top", $(this).height() - submenuHeight);
  } else {
    submenu.css("top", 0);
  }
});

* {
  box-sizing: border-box;
}
body {
  background: dodgerBlue;
}
.dropdown,
.dropdown li,
.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dropdown {
  width: 100%;
}
.dropdown ul {
  position: absolute;
  top: 100%;
  left: 100%;
  visibility: hidden;
  display: none;
  z-index: 1;
  width: 200px;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
}
.dropdown li {
  position: relative;
  float: left;
  clear: both;
}
.dropdown li:hover {
  z-index: 910;
}
.dropdown ul:hover,
.dropdown li:hover>ul,
.dropdown a:hover+ul,
.dropdown a:focus+ul {
  visibility: visible;
  display: block;
}
.dropdown a {
  display: block;
  background: #000;
  color: #fff;
  padding: 5px 20px;
  text-decoration: none;
}
.dropdown ul li {
  width: 100%;
}
.dropdown li:hover a {
  background: #333;
}
.dropdown li a:focus,
.dropdown li a:hover {
  background: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul class="dropdown">
  <li><a href="#">Link 1</a>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
      <li><a href="#">Link 5</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Link 4</a>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
      <li><a href="#">Link 5</a>
      </li>
      <li><a href="#">Link 6</a>
      </li>
      <li><a href="#">Link 7</a>
      </li>
      <li><a href="#">Link 8</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Link 5</a>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
      <li><a href="#">Link 5</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Link 6</a>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
      <li><a href="#">Link 5</a>
      </li>
    </ul>
  </li>
  <li><a href="#">Link 7</a>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
      <li><a href="#">Link 5</a>
      </li>
      <li><a href="#">Link 6</a>
      </li>
      <li><a href="#">Link 7</a>
      </li>
      <li><a href="#">Link 8</a>
      </li>
    </ul>
  </li>
</ul>