9

<select><option>foo</option></select>下拉菜单太靠近页面底部。我希望下拉菜单改为“下拉菜单”。我一直在搜索，但只能提取导航菜单上的信息。我尝试将<select class="select-store">top:100% 和 bottom:100% 设置为 position:absolute，这就是我在导航菜单下拉菜单中看到的“下拉”而不占优势。这可能吗？提前谢谢你们，代码如下；

HTML

<select class="select-store" onchange="document.location.href=this.value">
  <option value="/">Store Finder</option>
  <option value="/foo">foo</option>
  <option value="/beta">beta</option>
</select>

CSS

#finder .select-store{
  background: url("/images/storefinder_bg.png") no-repeat scroll 0 0 transparent;
  border: medium none;
  color: #5B5A5A;
  font-family: UNIV-C,Arial,Helvetica,sans-serif;
  font-size: 16px;
  font-weight: normal;
  height: 32px;
  line-height: 16px;
  padding: 3px;
  vertical-align: middle;
  width: 186px;
}
4

2 回答 2

9

SELECT元素行为由浏览器决定。它单独检测视口外的溢出，有时会重新定位列表。你不能直接控制它。

现在，如果您使用基于脚本的模拟 SELECT，您可以检测 JS 代码中的溢出并相应地重新定位。

于 2013-09-20T14:52:00.233 回答
0

这适用于 selectize.js 库。当您将页面滚动到底部时，部分选项将变得无法访问，并且 ypu 无法滚动任何内容。这个解决方案（一些谷歌代码和我的组合）允许在列表开始隐藏屏幕时自动切换下拉和下拉。在这种情况下，我得到了位于页面底部的 .footer 元素，但位于所有其他元素的前面，因此计算是与该元素相关的。只需添加代码。它将自动应用于所有选择列表。在我的项目中，我也在使用 jquery。$(".footer").height();如果要检测页面底部，请删除。

if (!window.Selectize.prototype.positionDropdownOriginal) {
    window.Selectize.prototype.positionDropdownOriginal = window.Selectize.prototype.positionDropdown;
    window.Selectize.prototype.positionDropdown = function () {
        isInViewPort = this.isInViewport();
        
        if (isInViewPort) {
            window.Selectize.prototype.positionDropdownOriginal.apply(this, arguments);
        }
        else 
        {  
            let $control = this.$control;
            let offset = this.settings.dropdownParent === 'body' ? $control.offset() : $control.position();

            this.$dropdown.css({
                width: $control.outerWidth(),
                top: offset.top - this.$dropdown.outerHeight(),
                left: offset.left
            });
        }
    };
}    

    window.Selectize.prototype.isInViewport = function(el) {
        let elementTop = this.$control.offset().top;
        let elementBottom = elementTop + this.$dropdown.outerHeight();

        let viewportTop = $(window).scrollTop();
        let viewportBottom = viewportTop + $(window).height()-$(".footer").height();
        return elementBottom<=viewportBottom;
    };
于 2022-01-10T17:01:44.473 回答