Теряются координаты при повторении

@AlxBtrd · Регистрация: 14.08.2014

Студворк — интернет-сервис помощи студентам

Есть скрипт выпадающего списка

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/** Выпадающий список**/
        //Установка значений
        function drop_list_set()
        {
            for(var x = 0; x<$('.dropdown_list').length; x++)
            {
                var dd_selector_item_selected = $('.dropdown_list').eq(x).find('.dropdown_list-body .selected');
                
                if(dd_selector_item_selected.length == 1)
                {
                    $('.dropdown_list').eq(x).find('.dropdown_list-title').html(dd_selector_item_selected.html()).attr('data-value', dd_selector_item_selected.attr('data-value'));
                }
            }
        }
        drop_list_set();
        $(document).click(function(e) {$('.dropdown_list .dropdown_list-body').hide();}).on('click','.dropdown_list-title', function(e){e.stopPropagation();});//по нажатию на фон
 
        //Открытие списка при клике
        $('.dropdown_list-title').click(function()
        {
            var this_body = $(this).next('.dropdown_list-body');
            //var item_pos = this_body.find('.selected').position().top;
            $('.dropdown_list-body').hide();
            this_body.toggle();
            this_body.scrollTop(this_body.find('.selected').position().top);
        });
        
        //Пункт для выбора
        $('.dropdown_list-body .item').click(function ()
        {
            $(this).parent('.dropdown_list-body').children('.item').removeClass('selected');
            $(this).addClass('selected');
            
            if($('.dropdown_list-body').is(":visible"))$('.dropdown_list-body').hide();
            
            $(this).parents('.dropdown_list').children('.dropdown_list-title').html($(this).html())
            $(this).parents('.dropdown_list').children('.dropdown_list-title').attr('data-value', $(this).attr('data-value'))
        });

Тут всё должно происходить так: Делаем видимым тело списка и прокручиваем тело до выбранного элемента.

JavaScript
1
2
3
4
5
6
7
8
9
//Открытие списка при клике
        $('.dropdown_list-title').click(function()
        {
            var this_body = $(this).next('.dropdown_list-body');
            //var item_pos = this_body.find('.selected').position().top;
            $('.dropdown_list-body').hide();
            this_body.toggle();
            this_body.scrollTop(this_body.find('.selected').position().top);
        });

При загрузке странице и первом открытии списка всё так и работает, но при повторном открытии тело не прокручивается.

Заметил что если ещё раз нажать на открытие списка, то он прокручивается.

В чём ошибка?

Добавлено через 24 минуты
Призываю Lazy_Den в эту тему

Добавлено через 35 минут
Ответ найден. Стоило добавить this_body.scrollTop(0); перед измерением позиции потому что

position().top - возвращает позицию начиная с видимой части блока.
scrollTop() - позиция прокрутки в блоке (расчитывается исходя из размеров всего блока, не только видимой его части).
Поэтому два варианта:
1) костыль - перед тем как взять top, делаем scrollTop(0)

JavaScript
1
2
3
4
5
$('.button').click(function(){
  test_index = 7;//пускай для примера он будет статичный
  $('.hidden_div').scrollTop(0); //теперь top будет равен высоте всех элементов до него
  $('.hidden_div').scrollTop(parseInt($('.hidden_div .elements').eq(test_index).position().top));
});

2) правильный - считать высоту всех элементов до необходимого

JavaScript
1
2
3
4
5
6
7
8
$('.button').click(function(){
  test_index = 7;//пускай для примера он будет статичный
 
  var el = $('.hidden_div .elements').eq(test_index);
  var scrollTop = el.height();
  $.each(el.prevAll(), function (index, elem) { scrollTop += $(elem).height(); });
  $('.hidden_div').scrollTop(scrollTop);
});

Спасибо посту с другого форума (тема)

@Lazy_Den · 06.03.2016, 23:07

Не по теме:

Сообщение от AlexBitard

Призываю Lazy_Den в эту тему

Кто-о-о меня зва-а-ал? :wizard: Как хорошо задержаться... Народ включает скрытые умственные резервы и решает задачки сам :)

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .