整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
tml頁面設置動態金額滾動效果！
一開始加載頁面，數字都會過渡滾動到具體數字上！
代碼：
html:
css:
js:
頁中添加滾動字幕效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滾動字體的設置</title>
</head>
<body>
<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>
<script type="text/javascript">
var canvas1 = document.querySelector("#canvas1") // 1.找到畫布對象
var ctx = canvas1.getContext("2d") // 2.上下文對象（畫筆）
ctx.shadowBlur = 10; // 陰影距離
ctx.shadowColor = "red" // 陰影顏色
ctx.shadowOffsetX = 30 // 陰影偏移
ctx.shadowOffsetY = 30 // 陰影偏移
ctx.font = "150px 楷體"
ctx.fillText("你好！", 20,150)
ctx.fillText("你好！", 20,350)
ctx.strokeText('你好！',23, 153)
ctx.strokeText('你好',23, 553)
canvas繪制文字
var x = 600
setInterval(function(){
if(x > -350){
//清空畫布
ctx.clearRect(0,0,600,600)
ctx.strokeText('你好！',x, 153)
ctx.fillText("你好！", x,350)
ctx.font = "50px 宋體"
ctx.strokeText('每天學習一點點',x, 553)
x -= 3
}else{x=590}
}, 16)
</script>
</body>
</html>
Web 開發中，經常遇到需要固定容器大小，然后內部內容超出的情況，相信非技術的也經常會遇到這樣的場景，沒錯，幾乎打開任何一個門戶網站你使用鼠標滾輪就屬于上面的情況。
解決方案自然就是 overflow 這個 CSS 屬性。
visible 默認值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，并且其余內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
效果如下：
visible
上面是 visible。
hidden
上面是 hidden。
scroll 與 auto
上面是 scroll 與 auto。
注意，Chrome 系列瀏覽器都會自動隱藏滾動條，不論設置 auto 還是 scroll。
因此我們才有今天的話題。
inherit 就不舉例了，這個與父元素有關。
首先，scroll 說好的顯示，被瀏覽器給搞掉了。
其次，隱藏是好事畢竟占位置，而且當今的網民基本都本能的知道滾動操作。
最后，個人舉四肢贊成自動隱藏。
但是！！！
你總會遇到不怎么上網的網民，在看不到內容時候不知所措。
亦或者，你遇到的坑爹的老板，就是要讓你顯示（這個老板可能不怎么上網……）。
或者你們產品設計對象就是一些非網民的使用。
又或者你們設計覺得有個自定義滾動條好看。
等等等等情況，相信我，你一定會遇到這個情況的。
于是我們需要定制一個滾動條，放心，CSS 偽類已經給你提供好了。
核心代碼由 Steven Lewis：https://codepen.io/stevenlewis/pen/hubpL 提供，本人用到，精簡下順便搬運。
<div class="frame"> Foo<br /> Bar<br /> Baz<br /> Help I'm trapped in an HTML factory! </div>
上面是 HTML 代碼。
frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .5);
}
這里是對應的 CSS 代碼。
做了對比動圖，大家看一下：
auto 或 scroll
上面是 auto（或 scroll）控制，細節是右邊的滾動條會自動隱藏。
定制
上面是經過定制的，所以不會隱藏。
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
隱藏默認的滾動條。
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
設置垂直滾動條寬度。
當然也有水平滾動條配置，.frame::-webkit-scrollbar:horizontal，那么就要設置他的高度的。如下：
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid red;
background-color: rgba(0, 0, 0, .5);
}
滾動條的其他樣式定制，注意，這個一定也要定制，否則就是一個透明的滾動條……
OK，建議沒有用過或者忘了的小伙伴保存一下，一定會再次用到的。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
