How to prevent vertical scroll from appearing when drop down menu is opened?

Question

css

Hello.

How to prevent vertical scroll from appearing when drop down menu is opened?
Here is an example.
If you remove it, then how to bind the drop-down list to the desired button? It is necessary that the drop-down list be at the top of the block with a scroll, how to implement this? .select{ position: relative;}

Answer 1

For example, like this:
codepen.io/anon/pen/zvaLKL
Remove position: relative from .select and add code:

$(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 also extends the position() method, with which you can set the position relative to any element ( https://jqueryui.com/position/ ).
You can also remove overflow-x from .block in your example instead of all of the above.