整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
景：
想要實現圖片持續滾動，既然使用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小時內與您取得聯系。
