<a>使用JavaScript</a>检测<a>区域内</a>

Question

My problem is, I got an horizontal slider with years inside so its like a timeline, the years are fetched by a query, at this moment, the user has to scroll by the years and then click one specific year and the information on the website will filter.

Is there a way to detect the year that is in the center of that horizontal slide? Maybe with a hidden area at the center?

Answer 1

maybe you should observe the scroll event of the slider element. you have to measure after each scroll process which element is inside of the visible slider area (I suppose others are hidden by overflow: scroll from the CSS, right?)...

you should use a small delay so that the function only triggers when the scrolling was really stopped and not constantly

as it is better to show that with actually working code... checkout my jsfiddle . It is at least working in Chrome but I suppose it will work in other browsers too... when you scroll through the year list and you stop for 50ms this list item that is visible in the visible area of the slider div is logged into with console.log into the JS console... hope that helps you =)

EDIT: had a small CSS error... fixed and URL updated