what, exactly, does data-anchor-target do?

坚强是说给别人听的谎言 提交于 2019-12-10 16:46:02

问题


I'm playing around with Skrollr and for the most part it seems pretty intuitive, the one thing that kind of gets me is the data-anchor-target attribute. Most times I don't need it but when I look at some examples it's usually included and I'm confused as to what it does. Does it just mean that at that target, that's when the Skrollr data-(pos) attributes kick in?


回答1:


data-anchor-target When using Skrollr.js, you normally use one of two methods as inputs for starting and stopping scrolling controls:

  1. Absolute positioning, relating to the start or the end of the entire document.
  2. Relative positioning, relating to the top, bottom or center of the viewing browser frame.

The data-anchor-target tag enables the developer the freedom to use an alternative element to trigger a modification. You place the control position directly inside the document. Elements are identified to the target tag with simple CSS selectors (.class or #id's). When the data-anchor-target tag element is scrolled into the viewing window, the developer can use the normal relative mode data-bottom-top tag to start the desired scrolling result. Use data-top-bottom as a control for when the data-anchor-target scrolls up and out of the viewing window. Remember this image?

This is way cool, as this enables perfect control for different viewing devices, orientations and screen sizes. Take a look at the anchor-target.html example. Notice how the blue face smiles whenever the red face is visible in frame? (Note: don't get freaked out by the !0 CSS identifier in that sample. Remember in skroller, the ! exclamation symbol is used to fix a numeric field from modifying during scrolling. )



来源:https://stackoverflow.com/questions/23621281/what-exactly-does-data-anchor-target-do

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!