Как сделать чтобы не появлялся вертикальный скролл когда открывается выпадающее меню?

Question

[timtimIT]

Здравствуйте.

Как сделать чтобы не появлялся вертикальный скролл когда открывается выпадающее меню?
Вот пример
Если убрать .select{ position: relative;} то как тогда привязать выпадающий список к нужной кнопке?
Нужно чтобы выпадающий список был по верху блока со скроллом,как это реализовать?

Answer 1

[enibeniraba]

Например, так:
codepen.io/anon/pen/zvaLKL
Убрать position: relative у .select и добавить код:

$(function()
{
  $('.select').on('shown.bs.dropdown', function() {
    var $button = $("a", this).first();
    var offset = $button.offset();
    $(".dropdown-menu", this).css({
      top: offset.top+$button.outerHeight(),
      left: offset.left
    });
  });
});

Еще jQuery UI расширяет метод position(), с помощью которого можно устанавливать позицию относительно любого элемента (https://jqueryui.com/position/).
Еще можно убрать в вашем примере overflow-x у .block вместо всего вышеперечисленного.

Comments

[timtimIT]

Спасибо! убрать overflow-x у .block нельзя из-за особенностей верстки..

[timtimIT]

Подксажите, а код var $button = $("a", this).first(); - вернет первую "a", а как сделать чтобы возвращался вторая "a"?

[timtimIT]

Еще возник вопрос , почему не работает если добавить к .select классы .btn-group .btn-group-stroke?

[enibeniraba]

Второй элемент: $(selector).eq(1). Хотя наверно лучше класс ему в разметке добавить и по классу искать.
.btn-group добавляет position:relative к .select

[timtimIT]

прикол в том что я убрал класс position:relative, и скрипт все равно не работает... $(function()
{
$('.menu-in-block').on('shown.bs.dropdown', function() {
var $button = $(".menu-button", this);
var offset = $button.offset();
$(".dropdown-menu", this).css({
top: offset.top + $button.outerHeight(),
left: offset.left
});
});
});
вместо "a" - .menu-button, вместо .select - .menu-in-block ,position:relative убрал...