Menu scroll ul li left and right on page scroll if menu length exceed the menu view length of menu category in Angular/Javascript
Babar-Shahzad opened this issue · 8 comments
Babar-Shahzad commented
I have already created a categories menu, and clicked left and right arrows its working fine for horizontal scroll, and on-page scroll menu category selection is working fine, but I want to need this auto-scroll when selected category view selection is active most right and same as the left side beside the arrows.
Here is an example from food panda I need like this auto scroll: https://www.foodpanda.pk/restaurant/v7xx/bundu-khan-bakery-ghazi-road
NickPiscitelli commented
I'm not certain I am understanding the problem, but you can manually control the current slide by using the exposed methods.
mahevstark commented
@Babar-Shahzad did you find a solution for this?
Babar-Shahzad commented
Thanks for asking me, yes I have resolved that issue.
Thanks,
Babar Shahzad
…________________________________
From: mahevstark ***@***.***>
Sent: Wednesday, December 7, 2022 5:34 PM
To: NickPiscitelli/Glider.js ***@***.***>
Cc: Babar Shahzad ***@***.***>; Mention ***@***.***>
Subject: Re: [NickPiscitelli/Glider.js] Menu scroll ul li left and right on page scroll if menu length exceed the menu view length of menu category in Angular/Javascript (Issue #210)
@Babar-Shahzad<https://github.com/Babar-Shahzad> did you find a solution for this?
—
Reply to this email directly, view it on GitHub<#210 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AQJHAFZLBTWFZMJTNJISLO3WMB74XANCNFSM5HURXKPQ>.
You are receiving this because you were mentioned.Message ID: ***@***.***>
mahevstark commented
@Babar-Shahzad Please Please share your solution with me. I'm stuck with same problem
mahevstark commented
I'm actually looking for it in "React-Native" but I think I can get the logic idea from your solution.
Babar-Shahzad commented
Sure I will shortly share with you the code
Get Outlook for Android<https://aka.ms/AAb9ysg>
…________________________________
From: mahevstark ***@***.***>
Sent: Wednesday, December 7, 2022 5:43:54 PM
To: NickPiscitelli/Glider.js ***@***.***>
Cc: Babar Shahzad ***@***.***>; Mention ***@***.***>
Subject: Re: [NickPiscitelli/Glider.js] Menu scroll ul li left and right on page scroll if menu length exceed the menu view length of menu category in Angular/Javascript (Issue #210)
@Babar-Shahzad<https://github.com/Babar-Shahzad> Please Please share your solution with me. I'm stuck with same problem
—
Reply to this email directly, view it on GitHub<#210 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AQJHAF57OFG5ZRYNYGX7YKLWMCBAVANCNFSM5HURXKPQ>.
You are receiving this because you were mentioned.Message ID: ***@***.***>
Babar-Shahzad commented
Hi, have a good day!
This is the solution I have implemented with my code.
@HostListener('window:scroll', ['$event']) //scroll event listener
onScroll(event: any, item?: any): void {
// nav bar control with scroll
this.checkScroll();
var navbar = document.getElementById("navbar");
navbar.classList.toggle("sticky", window.scrollY > 800);
var screenHeight = window.innerHeight;
var scrollHeight = (screenHeight - 270);
// menu selecion based on page scroll
const sections = document.querySelectorAll("section");
const navList = document.querySelectorAll("nav .topmenu ul li");
// window.addEventListener("scroll", () => {
let current = "";
let position;
sections.forEach((section) => {
const sectionTop = section.offsetTop + this.stickyHeaderHeight;
const sectionHeight = section.clientHeight;
const calculatedSection = sectionTop;
if (window.pageYOffset >= calculatedSection) { //- sectionHeight / 3
current = section.getAttribute("id");
}
});
navList.forEach((li) => { // add remove active class
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
const active = li.classList.add("active");
}
});
if (document.querySelector('#ulwidth li.active') !== null) {
let ul = document.getElementById("ulwidth");
let li = document.querySelector('#ulwidth li.active');
let activeli = document.getElementById(li.id);
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > this.lastScrollTop) {
// down scroll
if ((activeli.offsetLeft - ul.scrollLeft) >= ul.clientWidth) {
this.widgetsContent.nativeElement.scrollLeft += (ul.clientWidth - activeli.clientWidth - 50);
}
} else {
// up scroll
if ((activeli.offsetLeft - ul.scrollLeft) <= activeli.clientWidth) {
this.widgetsContent.nativeElement.scrollLeft -= (ul.clientWidth - activeli.clientWidth - 50);
}
}
this.lastScrollTop = st <= 0 ? 0 : st;
}
}
Thanks,
Babar Shahzad
Senior software engineer / Architect Angular
…________________________________
From: mahevstark ***@***.***>
Sent: Wednesday, December 7, 2022 5:44 PM
To: NickPiscitelli/Glider.js ***@***.***>
Cc: Babar Shahzad ***@***.***>; Mention ***@***.***>
Subject: Re: [NickPiscitelli/Glider.js] Menu scroll ul li left and right on page scroll if menu length exceed the menu view length of menu category in Angular/Javascript (Issue #210)
I'm actually looking for it in "React-Native" but I think I can get the logic idea from your solution.
—
Reply to this email directly, view it on GitHub<#210 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AQJHAF3QIDIFI6JEFDBNJ23WMCBDFANCNFSM5HURXKPQ>.
You are receiving this because you were mentioned.Message ID: ***@***.***>
mahevstark commented
Thank you 💟
…On Thu, Dec 8, 2022, 10:59 Babar-Shahzad ***@***.***> wrote:
Hi, have a good day!
This is the solution I have implemented with my code.
@HostListener('window:scroll', ['$event']) //scroll event listener
onScroll(event: any, item?: any): void {
// nav bar control with scroll
this.checkScroll();
var navbar = document.getElementById("navbar");
navbar.classList.toggle("sticky", window.scrollY > 800);
var screenHeight = window.innerHeight;
var scrollHeight = (screenHeight - 270);
// menu selecion based on page scroll
const sections = document.querySelectorAll("section");
const navList = document.querySelectorAll("nav .topmenu ul li");
// window.addEventListener("scroll", () => {
let current = "";
let position;
sections.forEach((section) => {
const sectionTop = section.offsetTop + this.stickyHeaderHeight;
const sectionHeight = section.clientHeight;
const calculatedSection = sectionTop;
if (window.pageYOffset >= calculatedSection) { //- sectionHeight / 3
current = section.getAttribute("id");
}
});
navList.forEach((li) => { // add remove active class
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
const active = li.classList.add("active");
}
});
if (document.querySelector('#ulwidth li.active') !== null) {
let ul = document.getElementById("ulwidth");
let li = document.querySelector('#ulwidth li.active');
let activeli = document.getElementById(li.id);
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > this.lastScrollTop) {
// down scroll
if ((activeli.offsetLeft - ul.scrollLeft) >= ul.clientWidth) {
this.widgetsContent.nativeElement.scrollLeft += (ul.clientWidth -
activeli.clientWidth - 50);
}
} else {
// up scroll
if ((activeli.offsetLeft - ul.scrollLeft) <= activeli.clientWidth) {
this.widgetsContent.nativeElement.scrollLeft -= (ul.clientWidth -
activeli.clientWidth - 50);
}
}
this.lastScrollTop = st <= 0 ? 0 : st;
}
}
Thanks,
Babar Shahzad
Senior software engineer / Architect Angular
________________________________
From: mahevstark ***@***.***>
Sent: Wednesday, December 7, 2022 5:44 PM
To: NickPiscitelli/Glider.js ***@***.***>
Cc: Babar Shahzad ***@***.***>; Mention ***@***.***>
Subject: Re: [NickPiscitelli/Glider.js] Menu scroll ul li left and right
on page scroll if menu length exceed the menu view length of menu category
in Angular/Javascript (Issue #210)
I'm actually looking for it in "React-Native" but I think I can get the
logic idea from your solution.
—
Reply to this email directly, view it on GitHub<
#210 (comment)>,
or unsubscribe<
https://github.com/notifications/unsubscribe-auth/AQJHAF3QIDIFI6JEFDBNJ23WMCBDFANCNFSM5HURXKPQ
>.
You are receiving this because you were mentioned.Message ID: ***@***.***>
—
Reply to this email directly, view it on GitHub
<#210 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AJOEHDWGXQ7W6PM344GDYVLWMF2N5ANCNFSM5HURXKPQ>
.
You are receiving this because you commented.Message ID:
***@***.***>