自定义滚动

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

由右向左滚动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()
});