js/css自定义滚动，聊天滚动，div滚动,video组件全屏事件监听

自定义滚动

优化：如果页面中有视频组件，能够全屏的，或者移动端横屏竖屏切换的组件，需要对自定义滚动进行优化，【在全屏时清除滚动定时器，退出全屏时重置各元素位置，创建新的定时器】

由右向左滚动js

// 右 -> 左
function markun(obj, delay, long, speed) {
  var ddd = obj.length;
  setTimeout(function () {
    setInterval(function () {
      for (var i = 0; i < obj.length; i++) {
        if ($(obj[i]).position().left <= (-500)) {
          $(obj[i]).css('left', $(obj[i]).parent().width());
        } else {
          $(obj[i]).css('left', $(obj[i]).position().left -= long);
        }
      }
    }, speed);
  }, delay);
}
var obj = $('.wtList .chat-cont');
markun([obj[0], obj[1]], 200, 1, 50);
markun([obj[2], obj[3]], 3000, 1, 30);
markun([obj[4], obj[5]], 100, 1, 20);
markun([obj[6]], 2000, 1, 30);

由下向上滚动js

//自定义滚动
function markun(obj, delay, long, speed) {
  var ddd = obj.length;
  setTimeout(function () {
    setInterval(function () {
      for (var i = 0; i < obj.length; i++) {
        if ($(obj[i]).position().top <= (-280)) {
          $(obj[i]).css('top', $(obj[i]).parent().height() + 60);
        } else {
          $(obj[i]).css('top', $(obj[i]).position().top -= long);
        }

      }
    }, speed);
  }, delay);
}
var obj = $('.wtList .chat-cont');

由下向上滚动scss代码

.problem-block {
      position: relative;
      width: 1000px;
      height: 885px;
      background: url("../images/pc/mainbg.png") no-repeat center;
      background-size: 100% 100%;
      overflow: hidden;
      h1 {
        position: absolute;
        top: 136px;
        left: 200px;
        font-size: 38px;
        color: $mainColor;
        background: url("../images/pc/bg-wt-title.png") no-repeat center;
        background-size: 100%;
        padding-left: 10px;
      }
      .wtList {
        position: relative;
        width: 650px;
        height: 260px;
        margin: 240px auto 0;
        overflow: hidden;
        border: 7px solid #ffd4a2;
        border-radius: 40px;
        padding: 30px 40px;
        box-sizing: border-box;
        @mixin positionTop($top) {
          top: $top
        }
        .align-right{
          justify-content: flex-end;
          right: 36px;
        }
        .chat-cont {
          position: absolute;
          display: flex;
          align-items: center;
          left: 36px;
          img {
            width: 64px;
            height: 64px;
          }
          .chat-left-point {
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-right: 20px solid #ffecd4;
            border-bottom: 13px solid transparent;
            margin-left: 0.13rem;
          }
          .chat-right-point {
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-left: 20px solid #ffecd4;
            border-bottom: 13px solid transparent;
            margin-right: 10px;
          }
          .chat-text {
            width: 425px;
            background: #ffecd4;
            border-radius: 7px;
            color: #87520e;
            padding: 18px;
            box-sizing: border-box;
            font-size: 20px;
          }
          &:nth-child(1){
            @include positionTop(38px)
          }
          &:nth-child(2){
            @include positionTop(140px)
          }
          &:nth-child(3){
            @include positionTop(240px)
          }
          &:nth-child(4){
            @include positionTop(315px)
          }
          &:nth-child(5){
            @include positionTop(390px)
          }
          &:nth-child(6){
            @include positionTop(465px)
          }
        }
      }
    }

html代码

<div class="problem-block">
			<h1>高会评审,你是否也有这些疑问？</h1>
			<div class="wtList">
				<div class="chat-cont">
					<img  src="images/m/01.png" alt="">
					<div class="chat-left-point"></div>
					<div class="chat-text">如果明年参加评审，论文集中准备可以吗？如果不好会有什么影响？</div>
				</div>
				<div class="chat-cont align-right">
					<div class="chat-text">高会评审是必须要在高会实务考试地区评审，还是工作所在地，还是与户籍有关呢？</div>
					<div class="chat-right-point"></div>
					<img  src="images/m/02.png" alt="">
				</div>
				<div class="chat-cont">
					<img  src="images/m/01.png" alt="">
					<div class="chat-left-point"></div>
					<div class="chat-text">高级会计师评审是否需要学位证？</div>
				</div>
				<div class="chat-cont align-right">
					<div class="chat-text">集团下面分公司财务经理有难度吗？</div>
					<div class="chat-right-point"></div>
					<img  src="images/m/02.png" alt="">
				</div>
				<div class="chat-cont">
					<img  src="images/m/01.png" alt="">
					<div class="chat-left-point"></div>
					<div class="chat-text">高级会计师评审是否需要学位证？</div>
				</div>
				<div class="chat-cont align-right">
					<div class="chat-text">业绩资料怎么写？普通单位的科员/税务师实务所的主管会计，怎样写业绩呀？</div>
					<div class="chat-right-point"></div>
					<img  src="images/m/02.png" alt="">
				</div>
		</div>

function markun(obj, delay, long, speed, height) {
  var ddd = obj.length;
  setTimeout(function () {
    setInterval(function () {
      for (var i = 0; i < obj.length; i++) {
        if ($(obj[i]).position().top <= (height)) {
          $(obj[i]).css('top', $(obj[i]).parent().height());
        } else {
          $(obj[i]).animate({top: $(obj[i]).position().top -= long})
        }
      }
    }, speed);
  }, delay);
}

浏览器video组件全屏事件监听

function changeFull(){
 // 全屏清除聊天滚动定时器，退出全屏时创建定时器
 if (checkFull()) {
    clearInterval(markunInterval)
  } else {
    var obj = $('.wtList .chat-cont');
    // 需要重置 chat-cont的初始值 objCss是rem单位，进行转换
    var objCss = [0.3, 1.8, 3.3, 4.8, 6.3, 7.8]
    for (var i = 0; i < obj.length; i++) {
      $(obj[i]).css('top', objCss[i]* topSize + 'px');
    }
    markun(obj, 0, topSize*1.5, 3000, -topSize*3.3);
  }
}

// 监听视频全屏事件
document.addEventListener("webkitfullscreenchange", function(e) {
  changeFull()
});
document.addEventListener("fullscreenchange", function(e) {
  changeFull()
});
document.addEventListener("mozfullscreenchange", function(e) {
  changeFull()
});
document.addEventListener("msfullscreenchange", function(e) {
  changeFull()
});