Horizontal sliding page, navigation bar Sliding Center JS Realization Idea

Recently in the News advisory page of the project, each news channel through the horizontal sliding switch, the top of the navigation active bar needs to switch to the corresponding channel, and when active reaches the middle, always in the middle. A similar effect is that the navigation bar of the UC browser "UC headlines" is centered in the same slide.

Write a sense of accomplishment, make a record. The frame used is vue, but the idea is irrelevant to the framework.

First look at the structure of HTML,

<ul>      <li class= ' active ' > Entertainment </li>      <li> news </li>      <li> Sports </li> </ul>

The purpose is to dynamically set the position of the UL, you can set the absolute positioning adjustment left value, you can also use CSS3 Translatex

That first need to get the location of the active corresponding Li tag, the key to achieve this is the 2 methods

Offsetleft gets the left value of the current element relative to the parent element

Getboundingclientrect () Gets the position of the current element relative to the viewport (viewport), with a high-width attribute.

First you need to get the center position = (window.innerwidth-li width)/2;

FORMULA: ul target position = Li relative to the left value of the parent element-centered position.

1Let li= document.queryselector ('. Active '));2Let ul = Document.queryselector (' ul ')3Let window_offsetwidth = window.innerwidth;//screen width;4           if(DOM) {5Let Lioffsetwidth =Dom.offsetleft,6               //Middle Value = (screen width-li width)/2;7Diffwidth = (Window_offsetwidth-dom.getboundingclientrect (). width)/2,8               //Target value = offset-middle value9Targetoffset = Lioffsetwidth-Diffwidth;Ten             One             if(Targetoffset < 0) { AUl.style.left = ' 0px '; -               return; -             } theUl.style.left =-targetoffset + ' px '

The above code, each time the active switch needs to be executed, calculated once. I'm using the Vue Watch event to monitor the change of the active binding variable to achieve

Horizontal sliding page, navigation bar Sliding Center JS Realization Idea