PaulOB - I need to revisit some of your code

/* from PaulOB at sitepoint.com */
function scrollMenusAdjust() {
	const scroller = document.querySelector("#menubar");
	const dropDown = document.querySelectorAll("li.drop > .aMenu");
	scroller.addEventListener("scroll", checkScroll);

	function checkScroll() {
		for (let i = 0; i < dropDown.length; i++) {
			dropDown[i].style.transform = "translateX(-" + scroller.scrollLeft + "px)";
		}
	}
}   // scrollMenusAdjust

Here is the problem = yes the above works, but any already focused/selected item loses focus when I click on the menubar’s horizontal scrollbar … and I don’t want it to:

before clicking on this scrollbar:

image

after scrolling via clicking:

image

I need the dotted lines shown in the 1st graphic to stay so that when I subsequently hit TAB, the next <LI> is selected. Right now, any immediate TAB selects the very last drop menu in the menubar.

???

That doesn’t happen on my imac as the tabbed element stays where it was and continues even after clicking on the scrollbar to move. I’m not sure if this is the demo I was using as I couldn’t find any others.

The mac scrollbar behaviour is different anyway and only appears when needed and can be swiped or clicked. I won’t have a PC to test on unfortunately as I am away from home until the new year and only have a mac with me. (I have a PC and mac at home.)

I’m guessing that you will need to get js to remember which tab was currently selected and if the scrollbar is clicked and the user then returns to the menu without going anywhere else then focus on that last visited tab. Sounds like a complex little routine as you will have to monitor the clicks and where they came from and went to.

On the mac you just scroll sideways with a swipe left and right on the mouse. No clicking needed.:slight_smile:

What I think would be better is that you add custom scrolling with js on the left and right of the menu bar and then you can control it explicitly. It’s a lot of work though.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.