JS的一些方法：
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
data () {
return {
screenWidth: document.body.clientWidth
}
},
mounted () {
const that = this
window.onresize = () =>{
return (() =>{
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
}，
watch:{
screenWidth(val){
// 为了避免频繁触发resize函数导致页面卡顿，使用定时器
if(!this.timer){
// 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function(){
// 打印screenWidth变化的值
console.log(that.screenWidth)
that.timer = false
},400)
}
}
}
（1）HTML页面视频标签大体如下
<video id="video"controls="controls">
<source src="./video/2.mp4" type="video/mp4" />
</video>
（2）视频加载后获取视频的长度
varelevideo = document.getElementById("video")
elevideo.addEventListener('loadedmetadata', function () {//加载数据
//视频的总长度 console.log(elevideo.duration)
})
（3）视频开始播放
varelevideo = document.getElementById("video")
elevideo.addEventListener('play', function () {//播放开始执行的函数
console.log("开始播放")
})
（4） 视频正在播放中
varelevideo = document.getElementById("video")
elevideo.addEventListener('playing', function () {//播放中console.log("播放中")
})
（5）视频加载中
varelevideo = document.getElementById("video")
elevideo.addEventListener('waiting', function () {//加载
console.log("加载中")
})
（6）视频暂停播放
varelevideo = document.getElementById("video")
elevideo.addEventListener('pause', function () {//暂停开始执行的函数
console.log("暂停播放")
})
（7）视频结束播放
varelevideo = document.getElementById("video")
elevideo.addEventListener('ended', function () {//结束
console.log("播放结束")
}, false)
你需要三个div即可实现，最外层div设置你需要显示的高宽以及overflow为hidden，第二层设置overflow-x。并将其宽度设置来超出最外层div，这样咱们的滚动条就会被在外层div所挡住，也就间接隐藏了滚动条也能滚动
以上便实现了滚动条隐藏且能滚动
这里IE/Chrome的用法是一致的，滚动事件onmousewheel，判断滚动属性为e.wheelDelta，且向上滚动是+120，向下是-120
而FireFox滚动事件DOMMouseScroll，判断滚动属性为e.detail，且向上是-3，向下是+3
这里需要兼容处理一下下。
