开发PC端页面布局遇到的问题总结

Element.getBoundingClientRect()

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口左上角的位置。返回的对象包含一组只读属性——top, bottom, left, right，单位为像素px。

const ele = document.getElementById('target')
const top = ele.getBoundingClientRect().top

获取鼠标滑动的距离

const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

平行四边形背景

直接使用transform: skewX(30deg);设置元素的样式，虽然可以达到平行四边形的效果，但是相应的文字也会变形，所以可以使用伪元素:before添加样式，实现平行四边形同时文字也不会倾斜变形。

.standard-list {
  position: relative;
   width: 644px;
   &:before {
     content: '';
     position: absolute;
     top: -110px;
     bottom: -85px;
     width: 300px;
     background-color: red;
     transform: skewX(17deg);
     right: 37px;
     z-index: -1;
   }
}

使用JS设置视频文件video的暂停和播放

播放视频

  playVideo (videoId) {
    const video = document.getElementById(videoId)
    video.controls = true  // 设置是否有视频控制进度条
    video.autoPlay = true
    if (video.paused) {
      video.play()
    }
  }

暂停视频播放

  pauseVideo (videoId) {
    const video = document.getElementById(videoId)
    video.pause()  
  }

利用这两个方法可以实现鼠标悬浮在视频上时自动播放视频，鼠标移出时暂停播放视频的功能，给鼠标增加事件就行，mouseenter和mouseleave事件。

<video id='video-base' muted loop style={{ width: '100%' }}>
  <source src={videoBase} type="video/mp4" />
</video>