请问下这个js怎么修改

qingwadaxia_1 2020-09-24 04:48:51

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}

div {
width: 100px;
height: 63px;
/* 必须 */
overflow: hidden;
/* 必须 */
margin: 50px auto;
border: 1px solid red;
text-align: center;
}

ul {
list-style: none;
}
</style>
</head>

<body>
<div id="review_box">

<ul id="comment1">

<li>第一条</li>

<li>第二条</li>

<li>第三条</li>

<li>第四条</li>

<li>第五条</li>

<li>第六条</li>
</ul>

<ul id="comment2"></ul>
</div>
<script>
window.onload = roll(50);

function roll(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 开始无滚动时设为0
var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
// 鼠标移入div时暂停滚动
ulbox.onmouseover = function() {
clearInterval(timer);
}
// 鼠标移出div后继续滚动
ulbox.onmouseout = function() {
timer = setInterval(rollStart, t);
}
}

// 开始滚动函数
function rollStart() {
// 上面声明的DOM对象为局部对象需要再次声明
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
if (ulbox.scrollTop >= ul1.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop++;
}
}
</script>
</body>

</html>

上面是一个向上滚动的代码，但是网页缩放百分比低于百分之80 之后，就不会滚动了，页面放了一段时间后，鼠标移入滚动停止事件也会出现异常，请问怎么修改下兼容完美更好些

...全文

5575 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

qingwadaxia_1 2020-09-24

打赏
举报

引用 1 楼 scscms太阳光的回复:

替换掉js代码

//页面缩小到一定程度时不动的原因是ulbox.scrollTop++每增加1px经过缩小被忽略为0了
window.onload = function(){
    var h = 0;//高度，自增，避免被缩放忽略
    var isStop = false;//是否停止
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    ul2.innerHTML = ul1.innerHTML;
    ulbox.onmouseover = function() {
        isStop = true
    }
    ulbox.onmouseout = function() {
        isStop = false
    }
    setInterval(()=>{
        if(!isStop){
            h = h >= ul1.scrollHeight ? 0: h + 1
            ulbox.scrollTop = h
        }
    },50)
};

引用 1 楼 scscms太阳光的回复:

替换掉js代码

//页面缩小到一定程度时不动的原因是ulbox.scrollTop++每增加1px经过缩小被忽略为0了
window.onload = function(){
    var h = 0;//高度，自增，避免被缩放忽略
    var isStop = false;//是否停止
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    ul2.innerHTML = ul1.innerHTML;
    ulbox.onmouseover = function() {
        isStop = true
    }
    ulbox.onmouseout = function() {
        isStop = false
    }
    setInterval(()=>{
        if(!isStop){
            h = h >= ul1.scrollHeight ? 0: h + 1
            ulbox.scrollTop = h
        }
    },50)
};

引用 1 楼 scscms太阳光的回复:

替换掉js代码

//页面缩小到一定程度时不动的原因是ulbox.scrollTop++每增加1px经过缩小被忽略为0了
window.onload = function(){
    var h = 0;//高度，自增，避免被缩放忽略
    var isStop = false;//是否停止
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    ul2.innerHTML = ul1.innerHTML;
    ulbox.onmouseover = function() {
        isStop = true
    }
    ulbox.onmouseout = function() {
        isStop = false
    }
    setInterval(()=>{
        if(!isStop){
            h = h >= ul1.scrollHeight ? 0: h + 1
            ulbox.scrollTop = h
        }
    },50)
};

引用 1 楼 scscms太阳光的回复:

替换掉js代码

//页面缩小到一定程度时不动的原因是ulbox.scrollTop++每增加1px经过缩小被忽略为0了
window.onload = function(){
    var h = 0;//高度，自增，避免被缩放忽略
    var isStop = false;//是否停止
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    ul2.innerHTML = ul1.innerHTML;
    ulbox.onmouseover = function() {
        isStop = true
    }
    ulbox.onmouseout = function() {
        isStop = false
    }
    setInterval(()=>{
        if(!isStop){
            h = h >= ul1.scrollHeight ? 0: h + 1
            ulbox.scrollTop = h
        }
    },50)
};

好像有点抖动，滚动的时候，

horizon_zpy 2020-09-24

打赏
举报

marquee

滚动是不是好些

scscms太阳光 2020-09-24

打赏
举报

替换掉js代码

//页面缩小到一定程度时不动的原因是ulbox.scrollTop++每增加1px经过缩小被忽略为0了
window.onload = function(){
    var h = 0;//高度，自增，避免被缩放忽略
    var isStop = false;//是否停止
    var ul1 = document.getElementById("comment1");
    var ul2 = document.getElementById("comment2");
    var ulbox = document.getElementById("review_box");
    ul2.innerHTML = ul1.innerHTML;
    ulbox.onmouseover = function() {
        isStop = true
    }
    ulbox.onmouseout = function() {
        isStop = false
    }
    setInterval(()=>{
        if(!isStop){
            h = h >= ul1.scrollHeight ? 0: h + 1
            ulbox.scrollTop = h
        }
    },50)
};

为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性，如何动态修改css样式呢？面对这个问题，小编带领大家来解决javascript动态修改css样式，小伙伴们都快来学习吧

用JavaScript修改CSS属性只有写原生的javascript了。1.用JS修改标签的 class 属性值：class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也就...

结合实际网页设计、网站制作所需要用到的JS地方，讲解JS的入门知识点，为WEB前端就业搭好基础

昨天遇到个来咨询利用原生的JS代码来修改HTML代码的的童鞋，耐心的给这个童鞋做了解答后，然后整理了一下测试代码，写成文章记录一下，方便以后有同需求的站长们。目标需求HTML原始代码目标要求：利用JS代码将以上...

使用 JavaScript，我们可以为 DOM 中的一个或多个元素设置 CSS 样式，修改它们，删除它们，甚至更改所有页面的整个样式表。让我们来看看我们可以做到这一点的不同方法：直接从 JavaScript 设置单个样式是处理动态 ...