前端css自定義滾動條樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: mediumpurple;
width: 800px;
height: 400px;
border: 2px solid whitesmoke;
overflow-x: scroll;
overflow-y: scroll;
}
/* 設置滾動條的整體樣式 */
::-webkit-scrollbar {
width: 7px; /*高寬分別對應橫豎滾動條的尺寸 */
height: 7px;
background-color: grey;
}
/* 滾動槽的軌道 */
::-webkit-scrollbar-track {
border-radius: 30px;
}
/* 滾動條的小滑塊 */
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: lightskyblue;
}
</style>
</head>
<body>
<div id="div1">
布蘭登 • 艾奇（Brendan Eich，1961年～），1995年在網景公司，發明的JavaScript。
一開始JavaScript叫做LiveScript，但是由於當時Java這個語言特別火，所以為了傍大牌，就改名為JavaScript。如同“北大”和“北大青鳥”的關系。“北大青鳥”就是傍“北大”大牌。
同時期還有其他的網頁語言，比如VBScript、JScript等等，但是后來都被JavaScript打敗了，所以現在的瀏覽器中，只運行一種腳本語言就是JavaScript
2003年之前，JavaScript被認為“牛皮鮮”，用來制作頁面上的廣告，彈窗、漂浮的廣告。什么東西讓人煩，什么東西就是JavaScript開發的。所以瀏覽器就推出了屏蔽廣告功能。
2004年，JavaScript命運開始改變，那一年，谷歌公司開始帶頭使用Ajax技術，Ajax技術就是JavaScript的一個應用。並且，那時候人們逐漸開始提升用戶體驗了。Ajax有一些應用場景。比如，當我們在百度搜索框搜文字時，輸入框下方的智能提示，可以通過Ajax實現。比如，當我們注冊網易郵箱時，能夠及時發現用戶名是否被占用，而不用調到另外一個頁面。
2007年喬布斯發布了第一款iPhone，這一年開始，用戶就多了上網的途徑，就是用移動設備上網。
JavaScript在移動頁面中，也是不可或缺的。並且這一年，互聯網開始標准化，按照W3C規則三層分離，JavaScript越來越被重視。
2010年，人們更加了解HTML5技術，HTML5推出了一個東西叫做Canvas（畫布），工程師可以在Canvas上進行游戲制作，利用的就是JavaScript。
2011年，Node.js誕生，使JavaScript能夠開發服務器程序了。
如今，WebApp已經非常流行，就是用網頁技術開發手機應用。手機系統有iOS、安卓。比如公司要開發一個“攜程網”App，就需要招聘三隊人馬，比如iOS工程師10人，安卓工程師10人，前端工程師10人。共30人，開發成本大；而且如果要改版，要改3個版本。現在，假設公司都用web技術，用html+css+javascript技術就可以開發App。也易於迭代（網頁一改變，所有的終端都變了）。
雖然目前WebApp在功能和性能上的體驗遠不如Native App，但是“WebApp慢慢取代Native App”很有可能是未來的趨勢。
Web前端有三層：
HTML：從語義的角度，描述頁面結構
CSS：從審美的角度，描述樣式（美化頁面）
JavaScript：從交互的角度，描述行為（提升用戶體驗）
其中JavaScript基礎又分為三個部分：
ECMAScript：JavaScript的語法標准。包括變量、表達式、運算符、函數、if語句、for語句等。
DOM：文檔對象模型，操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
BOM：瀏覽器對象模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。
</div>
</body>
</html>
效果如下:
