如何实现点击选择项时将下拉框滚动条定位在底部？

你要实现的是点击下拉选项时，让带滚动条的下拉容器（#dropdown）滚动到底部。原代码里的点击事件只处理了赋值、选中样式和隐藏下拉，缺少滚动条定位的逻辑，下面是调整后的代码：

完整修改代码 #

$(document).ready(function(){
    $('#textin1').click(function() {
        var pos = $('#textin1').offset();
        pos.top += $('#textin1').width();
        
        $('#dropdown').fadeIn(100);
        // 可选：如果打开下拉时也想直接滚到底部，就用这行替换原滚动到选中项的代码
        $('#dropdown').scrollTop($('#dropdown')[0].scrollHeight);
        return false;
    });

    $('#dropdown li').click(function() {
        $('#textin1').val($(this).text());
        $('#dropdown li').removeClass('selected');
        $(this).addClass('selected');
        // 核心：让下拉容器滚动到底部
        const dropdown = $(this).parent()[0];
        dropdown.scrollTop = dropdown.scrollHeight;
        $(this).parent().fadeOut(100);
    });
});

关键改动说明 #

• 在#dropdown li的点击事件里，通过获取下拉容器的scrollHeight（内容总高度，包含超出可视区的部分），把scrollTop设置为这个值，就能直接让滚动条跳到最底部。
• 如果需要点击输入框打开下拉时也直接滚到底部，把原代码中滚动到选中项的那行替换成$('#dropdown').scrollTop($('#dropdown')[0].scrollHeight);即可。

内容的提问来源于stack exchange，提问作者San