应用智能化 CSS 根据客户翻转部位运用款式

日期:2021-01-20 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

根据将当今翻转偏位量加上到到 html 元素的特性上,大家能够依据当今翻转部位设定网页页面上的元素款式。大家可使用它来搭建1个波动在网页页面顶部的导航栏组件。

这是大家将应用的 HTML,<header> 组件是大家期待当大家向下翻转时,自始至终波动在网页页面顶部的1个组件。

<header>I'm the page header</header>
<p>Lot's of content here...</p>
<p>More beautiful content...</p>
<p>Content...</p>

最先,大家将监视 document 上的 'scroll' 恶性事件,而且每次客户翻转时大家都会取下当今的 scrollY 值。

document.addEventListener('scroll', () => {
  document.documentElement.dataset.scroll = window.scrollY;
});

大家将翻转部位储存在 html 元素的数据信息特性中。假如您应用开发设计专用工具查询 DOM,它将以下所示:<html data-scroll="0">
如今大家可使用此特性来设定网页页面上的元素款式。

/* 确保 header标识自始至终高于 3em */
header {
  min-height: 3em;
  width: 100%;
  background-color: #fff;
}

/* 在网页页面顶部保存与 header 的 min-height 同样的高宽比 */
html:not([data-scroll='0']) body {
  padding-top: 3em;
}

/* 将 header 标识切换为 fixed 精准定位方式,而且将它固定不动在网页页面顶部 */
html:not([data-scroll='0']) header {
  position: fixed;
  top: 0;
  z-index: 1;

  /* box-shadow 特性可以提高波动的实际效果 */
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

基础上便是这样,当客户向下翻转时,header 标识将全自动从网页页面中分刘海离并波动在內容之上。JavaScript 编码其实不关注这1点,它的每日任务便是将翻转偏位量放在数据信息特性中。这很完善,由于 JavaScript 和 CSS 之间沒有密不可分藕合。

但仍有1些能够改善的地区,关键是在特性层面。

最先,大家务必改动 JavaScript 脚本制作,以融入网页页面载入时翻转部位不在顶部的状况。在这样的状况下,header 标识将展现不正确的款式。

网页页面载入时,大家务必迅速获得当今的翻转偏位量,这样保证了大家自始至终与当今的网页页面的情况同歩。

// 读取当今网页页面的翻转部位并将其存入 document 的 data 特性中
// 因而大家便可以在大家的款式表格中应用它
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// 监视翻转恶性事件
document.addEventListener('scroll', storeScroll);

// 第1次开启网页页面时就升级翻转部位
storeScroll();

接下来大家将看1些特性层面改善。假如大家要想获得 scrollY 翻转部位,访问器将务必测算网页页面上每一个元素的部位,以保证它回到正确的部位。假如大家不强制性它每次翻转都赋值才是最好是的做法。

要保证这1点,大家必须1个 debounce(防颤动)方式,这个方式会将大家的赋值恳求添加1个序列中,在访问器提前准备好绘图下1帧以前都不容易再次赋值,此时它早已测算出了网页页面上全部元素的部位,因此它不容易持续反复同样的工作中。

// 防颤动涵数接纳1个大家自定的涵数做为主要参数
const debounce = (fn) => {

  // 这包括了对 requestAnimationFrame 的引入,因此大家能够在大家期待的任什么时候候终止它
  let frame;
  
  // 防颤动涵数将回到1个能够接纳好几个主要参数的新涵数
  return (...params) => {
    
    // 假如 frame 的值存在,那就消除对应的回调函数
    if (frame) { 
      cancelAnimationFrame(frame);
    }

    // 使大家的回调函数在访问器下1帧更新时实行
    frame = requestAnimationFrame(() => {
      
      // 实行大家的自定涵数并传送大家的主要参数
      fn(...params);
    });

  } 
};

// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll));

// Update scroll position for first time
storeScroll();

根据标识恶性事件为 passive 情况,大家能够告知访问器大家的翻转恶性事件不容易被触碰互动阻拦(比如与谷歌地形图等软件互动时)。这容许访问器马上翻转网页页面,由于它如今了解该恶性事件不容易被阻拦。

document.addEventListener('scroll', debounce(storeScroll), { passive: true });

处理了特性难题后,大家如今能够根据平稳的方法应用 JavaScript 将获得的数据信息出示给 CSS,并可使用它来为网页页面上的元素加上款式。

Live Demo on CodePen

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。