2022-02-28 工作记录--JS-点击视频播放后，若滑动到不可视范围内，则停止播放视频

一、JS-点击视频播放后，若滑动到不可视范围内，则停止播放视频

$(function () {
   var train_video = document.querySelector('.right_video'); // 团训-视频
   var l_video = document.querySelector('.lessonVideo_box video'); // 教研备课-视频
   
   $(window).on('scroll',function () { // 页面滚动
       // 团训-不在类名为motto的元素的可视范围内，就停止播放视频
       if($(window).scrollTop()>($('.motto').offset().top+$('.motto').outerHeight()))||(($(window).scrollTop()+$(window).height())<$('.motto').offset().top) {
           train_video.pause();// 停止播放视频
       }
       // 教研备课-不在类名为lessonVideo_box的元素的可视范围内，就停止播放视频
       if($(window).scrollTop()>($('.lessonVideo_box').offset().top+$('.lessonVideo_box').outerHeight()))||(($(window).scrollTop()+$(window).height())<$('.lessonVideo_box').offset().top) {
          l_video.pause();// 停止播放视频
       }
  })
})

二、【补充知识】

其中

$(window).scrollTop()>($('.lessonVideo_box').offset().top+$('.lessonVideo_box').outerHeight()))||(($(window).scrollTop()+$(window).height())<$('.lessonVideo_box').offset().top
表示：不在类名为lessonVideo_box的元素的可视范围内

此内容参考自https://blog.csdn.net/chouyin9341/article/details/100749276