1

При написании скрипта с прокруткой вертикальной столкнулся с проблемой, что прокрутка осуществляется не в то место, в которое нужно. У меня есть карта. На ней расположены геообъекты различные. Справа от карты есть блок. В нем находится множество блоков с описанием этих геообъектов. Я хочу, чтобы при клике на геообъект в правом блоке осуществлялась автоматическая прокрутка до нужного описания. Вот адрес сайта, чтобы было понятнее: пример реализации. Привожу часть кода, с помощью которого получилась таккая ситуация:

.add('click', function (e) {//при клике на геообъект
    var map = Drupal.geofieldYmap.data['geofield-ymap-catalog-page'].map; //получаю карту
    var result = ymaps.geoQuery(map.geoObjects);    //получаю все объекты на карте
    var res = document.getElementsByClassName("view-catalog")[1].getElementsByClassName("views-row"); //получаю список описаний, справа от карты
    if(existchange.length != 0){ //если не первый клик за сессию
        for(var i=0;i<existchange.length;i++)
            res[existchange[i]].style.background = 'none'; //возвращаю старое оформления для всех описаний того объекта, по которому был ранее совершен клик
        for(var i = 0; i< result._objects.length; i++){ //пока не пройдусь по всем объектам
            if(String(result._objects[i].properties._data.hintContent) == res[existchange[0]].getElementsByClassName("views-field-title")[0].getElementsByTagName("span")[0].innerHTML){  //ищу нужный(ые) мне
                result._objects[i].options.set('preset', OldPresetByClick); //возвращаю старый пресет
            }
        }
    }
    existchange = []; //обнуляю список порядковых номеров старых описаний
    for(var i=0; i<res.length;i++){ //пока не пройдусь по всем описаниям
        //ищу описание, которое соответствует тому объекту, на который только что совершили клик и как только нахожу такой(ие)
        if(String(e.get('target').properties._data.hintContent) == res[i].getElementsByClassName("views-field-title")[0].getElementsByTagName("span")[0].innerHTML)
            existchange.push(i);//запоминаю позицию этого(их) описания(ий)
        }
        res[existchange[0]].id = 'clickhover'; //добавляю к первому найденному описанию якорь для того, чтобы осуществить прокрутку до него
        for(var i=0;i<existchange.length;i++)
            res[existchange[i]].style.background = 'rgba(102, 102, 102, 0.75)'; //меняю стиль для всех описаний    
        if(e.get('target').options._options.preset != 'custom#blockhover'){ //если клик совершен не второй раз по тому же геообъекту
            OldPresetByClick = OldPresetByHover; //запоминаю пресет который был у объекта до наведения мыши
            $('#block-views-catalog-block-1').animate({scrollTop: $('#clickhover').offset().top}, 1300); //прокручиваю до якоря
        }
        for(var i = 0; i< result._objects.length; i++){ //пока не пройдусь по всем объектам
            //проверяю сколько объектов на карте соответствует этому лоту
            if(result._objects[i].properties._data.hintContent ==  e.get('target').properties._data.hintContent){
                if(e.get('target').options._options.preset != 'custom#blockhover') //если клик совершен не второй раз по тому же геообъекту
                    OldPresetByClick = OldPresetByHover; //запоминаю пресет который был у объекта до наведения мыши
                result._objects[i].options.set('preset', 'custom#blockhover');    //каждому найденному объекту на карте меняю пресет   
            }
        }
    });

Подскажите пожалуйста, почему прокрутка работает некорректно и как это можно поправить?

1 ответ 1

1

Не работает, т.к. offset() элемента разный при каждом положении прокрутки внутри контейнера.

Надо учитывать текущий скролл контейнера.

jQuery('#block-views-catalog-block-1').animate({
    scrollTop: jQuery('#clickhover').position().top+jQuery('#block-views-catalog-block-1').scrollTop()
}, 1300);

И я взял position(), чтобы он считал относительно родителя, а не страницы.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.