整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
景：
想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。
原理：
图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插入在结尾，来实现无缝拼接，前提：1、必须是没有设置过渡动画的，2、重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化。
实现：
html主要包含三块：
1、最外层盒子，用来展示滚动图的区域，overflow:hidden;
2、滚动的盒子，主要改变该盒子的定位值，来实现滚动，里面包含所有要滚动的图片或文字
3、包含图片或文字的盒子。
代码：
class Roll {
constructor(opts) {
this.elem = opts.elem; // 图片包含滚动长度的元素的
this.elemBox = opts.elemBox; //图片展示区域元素，为了获取展示区域的高度
this.direction = opts.direction;
this.time = opts.time;
this.init();
this.roll = this.roll.bind(this)
this.startRoll = this.startRoll.bind(this)
this.stopRoll = this.stopRoll.bind(this)
}
init(){
this.elemHeight = this.elem.offsetHeight;
this.elemHtml = this.elem.innerHTML;
this.elem.innerHTML = this.elem.innerHTML + this.elemHtml+ this.elemHtml;
this.speed;
// 如果向上滚或者向左滚动每次减1，向下滚或者向右滚动每次加1
if(this.direction === 'top' || this.direction === 'left'){
this.speed = -1;
}else{
this.speed = 1;
}
}
roll(){
switch (this.direction) {
case "top":
// 如果滚动的盒子的top值超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + this.speed + 'px';
}
break;
case "bottom":
// 如果滚动的盒子的bottom值超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetBottom) >= this.elemHeight){
this.elemBox.style.bottom = 0;
}else{
this.elemBox.style.bottom = this.elemBox.offsetBottom + this.speed + 'px';
}
break;
case "left":
// 如果滚动的盒子的left超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetLeft) >= this.elemHeight){
this.elemBox.style.left = 0;
}else{
this.elemBox.style.left = this.elemBox.offsetLeft + this.speed + 'px';
}
break;
case "right":
// 如果滚动的盒子的right超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetRight) >= this.elemHeight){
this.elemBox.style.right = 0;
}else{
this.elemBox.style.right = this.elemBox.offsetRight + this.speed + 'px';
}
break;
default:
// 默认向上滚动，如果滚动的盒子的top超出元素的高度，则置为0
if(Math.abs(this.elemBox.offsetTop) >= this.elemHeight){
this.elemBox.style.top = 0;
}else{
this.elemBox.style.top = this.elemBox.offsetTop + speed + 'px';
}
}
}
stopRoll(){
clearInterval(this.scrollTimer)
}
startRoll(){
this.scrollTimer = setInterval(this.roll,this.time)
}
}
原文链接：https://www.php.cn/js-tutorial-448891.html
在Firefox中单独设置滚动条样式，你可以使用@-moz-document规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。
下面是一个例子，演示如何在Firefox中隐藏滚动条：
@-moz-document url-prefix() {
/* 在这里添加只对Firefox生效的样式 */
body {
scrollbar-width: none;
}
}在上面的例子中，@-moz-document url-prefix()表示只有在URL以空字符串（即所有URL）为前缀的情况下，才会应用其中的样式。在body元素中，scrollbar-width: none;将隐藏滚动条。
请注意，这样的规则只在Firefox中生效，而在其他浏览器中会被忽略。确保在使用这样的规则时进行测试，以确保所需的效果在目标浏览器中按预期工作。
在CSS中，*（星号）和 body 分别选择不同的元素或元素集合。
* {
margin: 0;
padding: 0;
}上述代码会将页面中所有元素的内外边距设置为零。
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}上述代码会将文档主体部分的字体设置为 Arial，并将背景颜色设置为 #f0f0f0。
所以，* 是一个通用的选择器，匹配所有元素，而 body 是特定于文档主体的选择器，用于选择文档主体元素并应用样式。在某些情况下，你可能希望使用 body 选择器，以更有针对性地影响文档的主要内容区域。
在最新的 Firefox 版本中，-moz-scrollbar-thumb 伪类选择器已被弃用，取而代之的是使用更通用的 CSS Scrollbar 模块规范。为了在 Firefox 中优化滚动条并使其变细，你可以使用新的规范中的属性。
以下是一个简单的示例，可以使 Firefox 中的滚动条变细：
/* Firefox 滚动条样式 */
* {
scrollbar-width: thin;
scrollbar-color: #999999 #f0f0f0;
}
/* Webkit 滚动条样式（Chrome, Safari等）*/
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-thumb {
background-color: #999999;
}
*::-webkit-scrollbar-track {
background-color: #f0f0f0;
}上述样式包含两部分：
请注意，滚动条样式在不同浏览器中可能会有所不同，因此上述样式在 Firefox 中有效，而 Webkit 样式在 Chrome 和 Safari 中有效。在实际使用中，你可能需要根据需要进行调整和测试，以确保在不同浏览器中都能达到预期的效果。
用js来实现。
html：
<div class="box"> <p class="animate"> 文字滚动的内容文字滚动的内容文字滚动的内容文字滚动的内容 </p> </div>
css：
*请认真填写需求信息，我们会在24小时内与您取得联系。
