我正在
github页面上进行一个项目,如果div的溢出-y:scroll将导致下拉菜单被切断/溢出,我用.dropup替换bootstrap .dropdown.您可以在此
jsfiddle看到该功能正常工作.请注意,如果单击顶行右侧的省略号图标,它将下拉,如果您单击底行上的图标,它将会下拉.
现在,我的实际实现(github page),代码完全相同(下图),但是它想要在打开时用.dropup替换所有.dropdown类,包括截止的最顶行,如下图所示.
我已经苦苦挣扎了一个星期而且无法弄明白.我尝试了一些不同的东西,我认为它已修复它但最终只是一个黑客,并没有在移动设备上工作,或者取代了一些但不是全部等等.
这是我正在使用的Javascript / jQuery,可以在jsfiddle和我的github源here中看到.
- $(document).on("shown.bs.dropdown",".dropdown",function () {
- // calculate the required sizes,spaces
- var $ul = $(this).children(".dropdown-menu");
- var $button = $(this).children(".song-menu");
- var ulOffset = $ul.offset();
- // how much space would be left on the top if the dropdown opened that direction
- var spaceUp = (ulOffset.top - $button.height() - $ul.height()) - $('#playlist').scrollTop();
- // how much space is left at the bottom
- var spaceDown = $('#playlist').scrollTop() + $('#playlist').height() - ((ulOffset.top + 10) + $ul.height());
- // switch to dropup only if there is no space at the bottom AND there is space at the top,or there isn't either but it would be still better fit
- if (spaceDown < 0 && (spaceUp >= 0 || spaceUp > spaceDown))
- $(this).addClass("dropup");
- }).on("hidden.bs.dropdown",function() {
- // always reset after close
- $(this).removeClass("dropup");
- });
编辑:
为了消除任何混淆,这里是没有添加.dropup函数的行为示例. jsfiddle注意当您单击最后一个菜单项时,它会打开菜单但需要滚动.我特别想删除.dropdown类并在这种情况下添加.dropup,因此不需要滚动.
解决方法
它花了一些基本的数学,但我设法弄清楚你想做什么.此代码根据可用于正常下拉列表的空间,在dropup和dropdown之间更改引导类.
我通过减去按钮的高度,dropdownmenu以及scrollContainer的高度在scrollContainer中向下滚动按钮的距离来计算出来.通过使用按钮偏移并减去scrollContainer的偏移量,我得到了div向下滚动的值.
这是我的jQuery(我选择.playlist类,因为它附加到你的scrollContainer,但你应该用id替换它或通过其他方式选择它):
- $(".dropdown,.dropup").click(function(){
- var dropdownClassCheck = $(this).hasClass('dropdown');
- var buttonOffset = $(this).offset().top;
- var scrollBoxOffset = $('.playlist').offset().top;
- var buttonHeight = $(this).height();
- var scrollBoxHeight = $('.playlist').height();
- var dropDownButtonHeight = $(this).children('ul').height();
- dropdownSpaceCheck = scrollBoxHeight>buttonOffset-scrollBoxOffset+buttonHeight+dropDownButtonHeight;
- if(dropdownClassCheck && !dropdownSpaceCheck){
- $(this).removeClass('dropdown').addClass('dropup');
- }
- else if(!dropdownClassCheck && dropdownSpaceCheck){
- $(this).removeClass('dropup').addClass('dropdown');
- }
- });
一个工作JSFiddle