javascript - 下拉菜单位于页面中间，应根据位置打开列表

Question

我有一个位于页面中间的下拉菜单。它总是向下打开列表，正如它应该的那样。现在，我们必须以这样的方式实现它:每当浏览器屏幕尺寸发生变化，并且下拉框没有足够的空间来打开列表时，它应该向上打开列表。

如果需要更多详细信息，请告诉我。

代码:

下拉列表/选择器的 HTML :

<div id="pick-container" class="wGridPx_30 hPrefixPx_2 hSuffixPx_2 outer ">
    <label id="pick-label" class="input hPrefixPx_1">
        <span id="pick-guide">Start typing EID, first or last name</span>
        <input id="peoplepick" type="text" class="wGridPx_29" />
    </label>
</div>

JavaScript:

if( $("div#people-picker-container").length == 0 ) {

    $("#peoplepick").parent().append("<div id='people-picker-container' class='ui-picker-container'></div>");
    //Set the desired height for dropdown
    $("#people-picker-container").css({'max-height':'260px'});  
}

添加列表:

var people = $.parseJSON(data.d);
$("#people-picker-container").html(null);

$.each(people, function (index, item) {

    //For image handler (ashx) please contact 'acn.ppl.plumbers' team to get code and access rights
    var person = "<div class='ui-person-item'><input type='hidden' name='eid' value=" + item.EnterpriseId + " />  " +
        "<div class='ui-person-img'><img src='/services/PhotoProvider.ashx?id=" + item.EnterpriseId + "'/></div>" +
        "<div class='ui-person-info'>" +
        "<span>" + item.DisplayName + "</span>" +
        "<div class='ui-person-desc'>" + item.DisplayText + "</div>" +
        "</div>" +
        "</div>";

    $("#people-picker-container").append(person);

CSS:

.ui-picker-container{
    position:absolute; 
    border:1px solid #afafaf;
    background-color:#fff; 
    overflow-y: auto; 
    overflow-x: hidden; 
    padding-right: 20px;
    z-index:100;}

.ui-picker-dropup{
    bottom: 18%;
}

.ie7 .ui-picker-container {
    margin-top:21px;
    margin-left:-240px;
}

.ui-person-item{
    width:auto;
    position:relative;
    min-height:48px;
    margin:8px 0;
    background-color:#fff;
    word-wrap:break-word;
    cursor:pointer;
    z-index:110;
}

.ui-person-img{
    width:48px;
    height:48px;
    overflow:hidden;
    position:absolute;
    left:10px;
}

.ui-person-img img{
    width:100%;
}

.ui-person-info{
    min-width:100px;
    position:absolute;
    left:80px;
    width:69%;
}

.ui-person-desc{
    font:1em Arial;
    color:#808080;
}

.hidden{
    display:none;
}

.ui-person-info span {
    color:#000;
    font-style:normal;
    left:auto;
    height:auto;
    top:auto;
    z-index:auto;
    cursor:pointer;
}

我正在尝试在屏幕尺寸更改时添加类 - .ui-picker-dropup，但这不适用于所有 scrren 尺寸，并且无法弄清楚如何动态计算底部％。还有其他方法可以做到这一点吗？ 我用的是这种方式，但这绝对是错误的:

//Calulate the size of scrren
var screenHight = $(window).height(); 
var screenWidth = $(window).width(); 

var pickerPosition = { left: 0, top: 0 };
var picker = document.getElementById('pick-container');
pickerPosition  = picker.getBoundingClientRect();
var xPicker = pickerPosition.left;
var ypicker = pickerPosition.top;
alert(" ypicker " + ypicker);

if(ypicker != 288){
    $("#people-picker-container" ).addClass( "ui-picker-dropup");}

Answer 1

我的一位设计师 friend 问我这个问题是为了她正在做的事情，并向我指出了你未回答的问题。我总结一下我给她的解决方案at this codepen ..

我将解决方案编写为一个基本的 jQuery 插件，当元素接近页面底部或超出的缓冲量时，它将向元素添加一个类。当元素具有特殊类时，这应该可以灵活地更改下拉列表的方向。

使用

$('#target').bottomFeeder();

// or with options

$('#target').bottomFeeder({
  buffer: 100,        // buffer is the distance from the bottom of the page that the class is added
  className: 'bottom' // class name to be added
});

插件

$.fn.bottomFeeder = (function(){
  var lastScrollTop = $(window).scrollTop(),
      delta = 5, // every 5px scroll 
      winH = 0, 
      observees = [];

  var checkPosition = function(obj){
    var el = $(obj.el), 
        top = el.offset().top;

    if((top + obj.config.buffer) > (lastScrollTop + winH))
      el.addClass(obj.config.className); 
    else
      el.removeClass(obj.config.className);
  };

  $(window).on('scroll', function(){
    // nothing to do
    if(observees.length === 0) return;

    var st = $(this).scrollTop();
    // scroll was less than the delta
    if(Math.abs(lastScrollTop - st) <= delta) 
      return;

    // update shared variables
    winH = $(window).outerHeight();
    lastScrollTop = st;

    for(var i = 0; i < observees.length; i++){
       checkPosition(observees[i]);
    }
  });

  return function(config){
    config = config || { buffer: 50, className: 'bottom' };
    observees.push({ el: this, config: config });
  };

})();