<div class="wrapper"> <!-- wrapper sınıfına overflow-y: auto verilmeli -->
    <!-- other elements -->
    
    <div class="child"></div>
    
    <!-- other elements -->
</div>

Yukarıdaki kod bloğuna yakın bir sistemimiz olduğunu düşünelim. Her dropdown butonuna tıklama işleminde aşağıdaki kontrolü sağlayarak aşağı doğru mu yoksa yukarıya doğru mu açılacağını belirtebilirsin.

{
    // click işlemi içerisi

    let topDistance = child.offsetTop - wrapper.offsetTop; // child elementinin, wrapper elementi içerisindeki y koordinatı diyebiliriz.
    let scrollAmount = wrapper.scrollTop; // wrapper daki scroll miktarı
    let exactTopDistance = topDistance - scrollAmount; // scroll olması durumunda uzaklık değişmeli
    let wrapperHeight = wrapper.offsetHeight;
    let exactBottomDistance = wrapperHeight - child.offsetHeight - exactTopDistance; // child elementin altında kalan alan. (wrapper elementi bitimine uzaklığı diyebiliriz)
    
    if(exactTopDistance >= exactBottomDistance) {
        // yukarıda kalan alan daha büyük dolayısıyla yukarıya doğru açılmalı.
    } else {
        // aşağı doğru açılmalı.
    }

}

Anlatım biraz karışık gelmiş olabilir. Çalışan bir demoya şuradan ulaşabilirsin.