整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
是簡易數據分析系列的第 10 篇文章。
原文首發于博客園：簡易數據分析 10。
友情提示：這一篇文章的內容較多，信息量比較大，希望大家學習的時候多看幾遍。
我們在刷朋友圈刷微博的時候，總會強調一個『刷』字，因為看動態的時候，當把內容拉到屏幕末尾的時候，APP 就會自動加載下一頁的數據，從體驗上來看，數據會源源不斷的加載出來，永遠沒有盡頭。
我們今天就是要講講，如何利用 Web Scraper 抓取滾動到底翻頁的網頁。
今天我們的練手網站是知乎數據分析模塊的精華帖，網址為：
https://www.zhihu.com/topic/19559424/top-answers
這次要抓取的內容是精華帖的標題、答題人和贊同數。下面是今天的教程。
剛開始我們要先創建一個 container，包含要抓取的三類數據，為了實現滾動到底加載數據的功能，我們把 container 的 Type 選為 Element scroll down，就是滾動到網頁底部加載數據的意思。
在這個案例里，選擇的元素名字為 div.List-item。
為了復習上一節通過數據編號控制條數的方法，我們在元素名后加個 nth-of-type(-n+100)，暫時只抓取前 100 條數據。
然后我們保存 container 這個節點，并在這個節點下選擇要抓取的三個數據類型。
首先是標題，我們取名為 title，選擇的元素名為 [itemprop='zhihu:question'] a：
然后是答題人名字 name 與 贊同數 like，選擇的元素名分別為 #Popover10-toggle a 和 button.VoteButton--up：
元素都選擇好了，我們按 Sitemap zhihu_top_answers -> Scrape -> Start craping 的路徑進行數據抓取，等待十幾秒結果出來后，內容卻讓我們傻了眼：
數據呢？我要抓的數據呢？怎么全變成了 null？
在計算機領域里，null 一般表示空值，表示啥都沒有，放在 Web Scraper 里，就表示沒有抓取到數據。
我們可以回想一下，網頁上的的確確存在數據，我們在整個的操作過程中，唯一的變數就是選擇元素這個操作上。所以，肯定是我們選擇元素時出錯了，導致內容匹配上出了問題，無法正常抓取數據。要解決這個問題，我們就要查看一下網頁的構成。
查看一下網頁的構成，就要用瀏覽器的另一個功能了，那就是選擇查看元素。
1.我們點擊控制面板左上角的箭頭，這時候箭頭顏色會變藍。
2.然后我們把鼠標移動到標題上，標題會被一個藍色的半透明遮罩蓋住。
3.我們再點擊一下標題，會發現我們會跳轉到 Elements 這個子面板，內容是一些花花綠綠看不大懂的代碼
做到這里心里別發怵，這些 HTML 代碼不涉及什么邏輯，在網頁里就是個骨架，提供一些排版的作用。如果你平常用 markdown 寫作，就可以把 HTML 理解為功能更復雜的 markdown。
結合 HTML 代碼，我們先看看 [itemprop='zhihu:question'] a 這個匹配規則是怎么回事。
首先這是個樹形的結構：
<h2 class='ContentItem-title'/> <div itemprop='zhihu:question'/> <a>如何快速成為數據分析師？</a> </div> </h2>
我們再分析一個抓取標題為 null 的標題 HTML 代碼。
我們可以很清楚的觀察到，在這個標題的代碼里，少了名為 div 屬性為 itemprop='zhihu:question' 的標簽！這樣導致我們的匹配規則匹配時找不到對應標簽，Web Scraper 就會放棄匹配，認為找不到對應內容，所以就變成 null 了。
找到原因后我們就好解決問題了。
4.解決問題
我們發現，選擇標題時，無論標題的嵌套關系怎么變，總有一個標簽不變，那就是包裹在最外層的，屬性名為 class='ContentItem-title' 的 h2 標簽。我們如果能直接選擇 h2 標簽，不就可以完美匹配標題內容了嗎？
邏輯上理清了關系，我們如何用 Web Scraper 操作？這時我們就可以用上一篇文章介紹的內容，利用鍵盤 P 鍵選擇元素的父節點：
放在今天的課程里，我們點擊兩次 P 鍵，就可以匹配到標題的父標簽 h2 （或 h2.ContentItem-title）：
以此類推，因為答題人名字也出現了 null，我們分析了 HTML 結構后選擇名字的父標簽 span.AuthorInfo-name，具體的分析操作和上面差不多，大家可以嘗試一下。
我的三個子內容的選擇器如下，可以作為一個參考：
最后我們點擊 Scrape 爬取數據，檢查一下結果，沒有出現 null，完美！
爬取知乎數據時，我們會發現滾動加載數據那一塊兒很快就做完了，在元素匹配那里卻花了很多時間。
這間接的說明，知乎這個網站從代碼角度上分析，寫的還是比較爛的。
如果你爬取的網站多了，就會發現大部分的網頁結構都是比較「隨心所欲」的。所以在正式抓取數據前，經常要先做小規模的嘗試，比如說先抓取 20 條，看看數據有沒有問題。沒問題后再加大規模正式抓取，這樣做一定程度上可以減少返工時間。
這期內容比較多，大家可以多看幾遍消化一下，下期我們說些簡單的內容，講講如何抓取表格內容。
簡易數據分析 09 | Web Scraper 自動控制抓取數量 & Web Scraper 父子選擇器
簡易數據分析 08 | Web Scraper 翻頁——點擊「更多按鈕」翻頁
本文中，我們將深入了解滾動條的世界。我知道，這聽起來不太迷人，但相信我，精心設計的頁面與匹配的滾動條齊頭并進。老式的鍍鉻滾動條只是不適合那么多。
我們將研究滾動條的細節，然后看看一些很酷的例子。
要設置滾動條的樣式，您需要熟悉滾動條的解剖結構。請看這張圖：
這里要記住的兩個主要組成部分是：
我們可以使用供應商前綴：：-webkit-scrollbar 選擇器更改完整滾動條的屬性。我們可以給滾動條一個固定的寬度、背景顏色、圓角......很多事情！如果我們自定義頁面的主滾動條，那么我們可以直接在 HTML 元素上使用 ：：-webkit-scrollbar：
html::-webkit-scrollbar {
/* Style away! */
}如果我們自定義一個滾動框，這是溢出的結果：滾動，那么我們可以在該元素上使用 ：：-webkit-scrollbar：
.element::-webkit-scrollbar {
/* Style away! */
}下面是一個快速示例，它設置 HTML 元素滾動條的樣式，使其寬，背景為紅色：
如果我們只想更改滾動條的thumb或track怎么辦？你猜對了——我們分別為這兩個元素提供了特殊的前綴偽元素：：：-webkit-scrollbar-thumb 和 ：：-webkit-scrollbar-track。以下是我們將所有這些東西放在一起時可能實現的想法：
向您展示三個度的自定義滾動條樣式，然后打開一個從網絡上提取示例的大型展示，以獲取靈感。
自定義滾動條仍然可以是最小的。我整理了一組示例，這些示例巧妙地改變了外觀，無論是對拇指或軌道進行輕微的顏色更改，還是對背景進行一些淺色造型。
如您所見，在滾動條樣式方面，我們不必發瘋。有時，只需進行細微的更改即可通過與整體主題匹配的滾動條來增強整體用戶體驗.
html::-webkit-scrollbar{
width: 50px;
background:red;
}
如果我們只想更改滾動條的拇指或軌道怎么辦？你猜對了——我們分別為這兩個元素提供了特殊的前綴偽元素：：：-webkit-scrollbar-thumb 和 ：：-webkit-scrollbar-track。以下是我們將所有這些東西放在一起時可能實現的想法：
html::-webkit-scrollbar {
width: 30px;
}
html::-webkit-scrollbar-track {
background: black;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
html::-webkit-scrollbar-thumb {
background: red;
border: 3px solid blue;
}向您展示三個度的自定義滾動條樣式，然后打開一個從網絡上提取示例的大型展示，以獲取靈感。
自定義滾動條仍然可以是最小的。我整理了一組示例，這些示例巧妙地改變了外觀，無論是對拇指或軌道進行輕微的顏色更改，還是對背景進行一些淺色造型。
.container {
display: flex;
margin: 50px;
column-gap: 20px;
}
.scrollbar {
height: 300px;
width: 50%;
overflow: auto;
padding: 0 10px;
}
/* ScrollBar 1 */
#scrollbar1::-webkit-scrollbar {
width: 10px;
}
#scrollbar1::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #e7e7e7;
border: 1px solid #cacaca;
}
#scrollbar1::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #d55959;
}
/* ScrollBar 2 */
#scrollbar2::-webkit-scrollbar {
width: 12px;
}
#scrollbar2::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #e7e7e7;
border: 1px solid #cacaca;
box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}
#scrollbar2::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #363636;
}
/* ScrollBar 3 */
#scrollbar3::-webkit-scrollbar {
width: 12px;
}
#scrollbar3::-webkit-scrollbar-track {
background-color: #e7e7e7;
border: 1px solid #cacaca;
}
#scrollbar3::-webkit-scrollbar-thumb {
background-color: #060b9a;
}
/* ScrollBar 4 */
#scrollbar4::-webkit-scrollbar {
width: 12px;
}
#scrollbar4::-webkit-scrollbar-track {
background-color: transparent;
border: 1.5px solid #7e7e7e;
border-radius: 8px;
}
#scrollbar4::-webkit-scrollbar-thumb {
background-color: #f1f1f1;
border: 2px solid #616161;
border-radius: 8px;
}
/* ScrollBar 5 */
#scrollbar5::-webkit-scrollbar {
background-color: #000;
width: 12px;
border-radius: 10px;
}
#scrollbar5::-webkit-scrollbar-track {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}
#scrollbar5::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(.5, #a520ca), color-stop(1, #2681cc));
border-radius: 10px;
}
/* ScrollBar 6 */
#scrollbar6::-webkit-scrollbar {
width: 12px;
}
#scrollbar6::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #95a5a6;
border: 1px solid #cacaca;
}
#scrollbar6::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: #2c3e50;
}如您所見，在滾動條樣式方面，我們不必發瘋。有時，只需進行細微的更改即可通過與整體主題匹配的滾動條來增強整體用戶體驗。
:-webkit-scrollbar 滾動條整體部分，可以設置寬度啥的
body::-webkit-scrollbar{
// 樣式
}::-webkit-scrollbar-button 滾動條兩端的按鈕
::-webkit-scrollbar-track 外層軌道
::-webkit-scrollbar-track-piece 內層滾動槽
::-webkit-scrollbar-thumb 滾動的滑塊
::-webkit-scrollbar-corner 邊角
::-webkit-resizer 定義右下角拖動塊的樣式
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
