Прокрутка до активного пункта меню при прокрутке страницы (на мобильной версии)?

Question

[Azamat Lee]

Перерыл уже всё что можно, никак не могу найти как реализовать автопрокрутку меню при скролле страницы.
Активный класс нужному пункту присваивается, осталось только прокрутить. Помогите, пожалуйста
https://klg.new.thebull.ru/takeout/ - здесь пытаюсь сделать это
https://eda.yandex/restaurant/papiny_burgery_glago... - тут это работает как хотелось бы, на мобильной версии.

Comments

[Александр Епихин]

Не совсем понятно что такое "прокрутка меню". Сейчас вижу что при скроллинге страницы меняется активная категория меню блюд.

[Azamat Lee]

Александр Епихин, при прокрутке страницы выделяется активный элемент, а нужно, чтобы еще прокручивалось само до этого элемента, когда он за пределами видимости

[Александр Епихин]

Что такое активный элемент? 1)Категория в навигации https://yadi.sk/i/WBjZYruo9hRP8g или 2) сама категория https://yadi.sk/i/rCSpfc_dabMxpQ.
Сейчас при клике на 1) страница прокручивается к 2) (только без учета высоты шапки)

[Azamat Lee]

Речь идёт о мобильной версии https://yadi.sk/i/sFn6jeykYiEJWg

Answer 1

[MagnusDidNotBetray]

Для начала, на мобильной версии, элементу .takeout-nav задайте ширину 100vw, чтобы он прокручивался. Далее, в том месте, где вы добавляете пункту меню активный класс, добавьте примерно такой код:

const container = document.querySelector('.takeout-nav');
let containerRect = container.getBoundingClientRect();
let activeOptionRect = activeOption.getBoundingClientRect(); //activeOption - пункт меню, на который навешивается .active
if (containerRect.left + containerRect.width < activeOptionRect.left + activeOptionRect.width){
  container.scrollLeft += activeOptionRect.left - containerRect.left;
}
else if (activeOptionRect.left < containerRect.left){
  container.scrollLeft -= containerRect.left - activeOptionRect.left;
}

Первое что пришло в голову, возможно нужно допилить.

Comments

[Azamat Lee]

Спасибо за ответ! .takeout-nav уже прокручивается, а я могу этот код использовать вне того места, где присваивается активный пункт?

[MagnusDidNotBetray]

Azamat Lee, можете. Можно вынести его в функцию, и вызывать с активным пунктом в качестве аргумента, или просто искать активный пункт через querySelector().

[Azamat Lee]

Правильно ли я понял? прошу извинить, я в jquery профан :(

jQuery(document).ready(function($){
const container = document.querySelector('.takeout-nav');
let containerRect = container.getBoundingClientRect();
const activeOption = document.querySelector('.current-menu-item');	
let activeOptionRect = activeOption.getBoundingClientRect(); 
if (containerRect.left + containerRect.width < activeOptionRect.left + activeOptionRect.width){
  container.scrollLeft += activeOptionRect.left - containerRect.left;
}
else if (activeOptionRect.left < containerRect.left){
  container.scrollLeft -= containerRect.left - activeOptionRect.left;
}
});

[MagnusDidNotBetray]

Azamat Lee, да не очень правильно. Объявляете функцию:

function scrollToActiveOption(){
    const container = document.querySelector('.takeout-nav');
    let containerRect = container.getBoundingClientRect();
    const activeOption = document.querySelector('.current-menu-item');	
    let activeOptionRect = activeOption.getBoundingClientRect(); 
    if (containerRect.left + containerRect.width < activeOptionRect.left + activeOptionRect.width){
        container.scrollLeft += activeOptionRect.left - containerRect.left;
    }
    else if (activeOptionRect.left < containerRect.left){
        container.scrollLeft -= containerRect.left - activeOptionRect.left;
    }
}

А в том месте где вы добавляете класс current-menu-item, после того как его добавили, эту функцию вызываете:
scrollToActiveOption();

[Azamat Lee]

Прошу направить, вставил после добавления класса и выдало ошибку.

!function(t){"use strict";function s(e,r){var i=t.proxy(this.process,this);this.$body=t("body"),this.$scrollElement=t(e).is("body")?t(window):t(e),this.options=t.extend({},s.DEFAULTS,r),this.selector=(this.options.target||"")+" li > a",this.offsets=[],this.targets=[],this.activeTarget=null,this.scrollHeight=0,this.$scrollElement.on("scroll.bs.scrollspy",i),this.refresh(),this.process()}function e(e){return this.each(function(){var r=t(this),i=r.data("bs.scrollspy"),o="object"==typeof e&&e;i||r.data("bs.scrollspy",i=new s(this,o)),"string"==typeof e&&i[e]()})}s.VERSION="3.3.2",s.DEFAULTS={offset:10},s.prototype.getScrollHeight=function(){return this.$scrollElement[0].scrollHeight||Math.max(this.$body[0].scrollHeight,document.documentElement.scrollHeight)},s.prototype.refresh=function(){var s="offset",e=0;t.isWindow(this.$scrollElement[0])||(s="position",e=this.$scrollElement.scrollTop()),this.offsets=[],this.targets=[],this.scrollHeight=this.getScrollHeight();var r=this;this.$body.find(this.selector).map(function(){var r=t(this),i=r.data("target")||r.attr("href"),o=/^#./.test(i)&&t(i);return o&&o.length&&o.is(":visible")&&[[o[s]().top+e,i]]||null}).sort(function(t,s){return t[0]-s[0]}).each(function(){r.offsets.push(this[0]),r.targets.push(this[1])})},s.prototype.process=function(){var t,s=this.$scrollElement.scrollTop()+this.options.offset,e=this.getScrollHeight(),r=this.options.offset+e-this.$scrollElement.height(),i=this.offsets,o=this.targets,l=this.activeTarget;if(this.scrollHeight!=e&&this.refresh(),s>=r)return l!=(t=o[o.length-1])&&this.activate(t);if(l&&s<i[0])return this.activeTarget=null,this.clear();for(t=i.length;t--;)l!=o[t]&&s>=i[t]&&(!i[t+1]||s<=i[t+1])&&this.activate(o[t])},s.prototype.activate=function(s){this.activeTarget=s,this.clear();var e=window.location.href.split("#"),r="/"==e[0].charAt(e[0].length-1)?e[0]:e[0]+"/",i=this.selector+'[data-target="'+s+'"],'+this.selector+'[href="'+s+'"],'+this.selector+'[href="'+r+s+'"]',o=t(i).parents("li").addClass("current-menu-item");o.parent(".sub-menu").length&&(o=o.closest("li.fusion-dropdown-menu").addClass("current-menu-item")),o.trigger("activate.bs.scrollspy"),o&&t(this.selector).blur()},s.prototype.clear=function(){t(this.selector).parentsUntil(this.options.target,".current-menu-item").removeClass("current-menu-item"),t(this.selector).parentsUntil(this.options.target,".current-menu-parent").removeClass("current-menu-parent")}; var r=t.fn.scrollspy;t.fn.scrollspy=e,t.fn.scrollspy.Constructor=s,t.fn.scrollspy.noConflict=function(){return t.fn.scrollspy=r,this},t(window).on("load.bs.scrollspy.data-api",function(){t('[data-spy="scroll"]').each(function(){var s=t(this);e.call(s,s.data())})})}(jQuery);

[MagnusDidNotBetray]

Azamat Lee, у меня появилось желание отправить вас на фриланс, вам даже лень показать код в нормальном виде, а не это минифицированное нечто. И так, помогаю в последний раз.
Задайте .takeout-nav какую-то ширину, чтобы в нем работал скролл. Сейчас я открываю ваш сайт, и вижу, как этот элемент растягивается до 985px, и скролл в нем не работает.
Далее, откатите то что сделали, мне лень разбираться в этом коде. И вставьте, например в owlmain.js это код

document.addEventListener('DOMContentLoaded', () => {
  const observer = new MutationObserver(function (mutationsList, observer){
    const container = document.querySelector('.takeout-nav');
    let containerRect = container.getBoundingClientRect();
    const activeOption = document.querySelector('.current-menu-item');
    let activeOptionRect = activeOption.getBoundingClientRect();
    if (containerRect.left + containerRect.width < activeOptionRect.left + activeOptionRect.width){
        setTimeout(() => container.scrollLeft += activeOptionRect.left - containerRect.left, 10);
    }
    else if (activeOptionRect.left < containerRect.left){
        setTimeout(() => container.scrollLeft -= containerRect.left - activeOptionRect.left, 10);
    }
  });
  observer.observe(document.querySelector('.takeout'), {
    attributes: true,
    subtree: true
  });
});

Больше ничем помочь не могу, всего вам хорошего.

[Azamat Lee]

MagnusDidNotBetray, Спасибо огромное, всё заработало)

[Azamat Lee]

Еще раз, спасибо большое. Поменял один символ на знак больше, чтобы было похоже как у яндекса, вдруг кому-то пригодится. Для фиксации активного элемента у левой части экрана.

if (containerRect.left + containerRect.width > activeOptionRect.left + activeOptionRect.width)

Answer 2

[Nikita Undefined]

1) Почему не использовать просто якорьные ссылки?) Зачем что-то выдумывать?)
2) для плавности и прочих штук со скроллом могу посоветовать либу scrollmagic.io, ну или берите любую другую готовую если самому писать на JS лень) https://ruseller.com/lessons.php?rub=32&id=2294

Comments

[Azamat Lee]

Не совсем понял, у меня и так сделаны якорные ссылки, но они сделаны до категории при нажатии пункта меню. А мне еще нужно, если человек сам листает страницу, то срабатывал горизонтальный скролл до активного пункта меню в соответствии с прокручиваемой категорией. Плавная прокрутка тоже реализована)

[Nikita Undefined]

Azamat Lee, В таком случае см. п.2 моего ответа. В документации к либам есть ответ на ваш вопрос) Или вам нужно решение на vanilaJS? Тогда вам на фриланс)

[Azamat Lee]

Я не знаю про vanila. Могу ли я вычислить расстояние до активного пункта меню и прокрутить на это расстояние влево?