滾動條控制方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及瀏覽器領(lǐng)域，尤其涉及一種滾動條控制方法及裝置。
【背景技術(shù)】
[0002]對于瀏覽器提供的原生滾動條無法自定義樣式的缺陷，目前采用的解決方式是利用網(wǎng)頁腳本對瀏覽器新增自定義滾動條，以模擬原生滾動條的行為和樣式。上述這種方案解決了原生滾動條無法自定義樣式的缺陷，但同時破壞了原生滾動條的事件體系及一些默認(rèn)行為，比如網(wǎng)頁可以監(jiān)聽的滾動事件、滾動事件的冒泡及鼠標(biāo)滾輪滾動、上下鍵觸發(fā)的滾動、嵌套滾動問題等原生滾動條常用的事件行為，該自定義滾動條都可能無法提供；若使用網(wǎng)頁腳本來完整模擬原生滾動條的所有行為，則代碼開發(fā)成本很高且代碼量大，而大量的代碼將導(dǎo)致用戶加載網(wǎng)頁的速度變得十分緩慢，用戶滿意度低。

【發(fā)明內(nèi)容】

[0003]鑒于此，有必要提供一種滾動條控制方法及裝置，以實現(xiàn)自定義滾動條的同時保留原生滾動條的事件體系和默認(rèn)行為。
[0004]本發(fā)明實施例公開了一種滾動條控制方法，包括以下步驟:
[0005]將瀏覽器原生滾動條所在的原生滾動條容器嵌套到預(yù)設(shè)的一外層容器中；
[0006]監(jiān)控所述原生滾動條容器的滾動事件；
[0007]根據(jù)所述原生滾動條容器對應(yīng)的滾動事件，操作所述外層容器中自定義滾動條的位置，使所述自定義滾動條與所述原生滾動條保持一致。
[0008]本發(fā)明實施例還公開了一種滾動條控制裝置，包括:
[0009]設(shè)置模塊，用于將瀏覽器原生滾動條所在的原生滾動條容器嵌套到預(yù)設(shè)的一外層容器中；
[0010]監(jiān)控模塊，用于監(jiān)控所述原生滾動條容器的滾動事件；
[0011]控制模塊，用于根據(jù)所述原生滾動條容器對應(yīng)的滾動事件，操作所述外層容器中自定義滾動條的位置，使所述自定義滾動條與所述原生滾動條保持一致。
[0012]本發(fā)明實施例將瀏覽器原生滾動條所在的原生滾動條容器嵌套到預(yù)設(shè)的一外層容器中；監(jiān)控所述原生滾動條容器的滾動事件；根據(jù)所述原生滾動條容器對應(yīng)的滾動事件，操作所述外層容器中自定義滾動條的位置，使所述自定義滾動條與所述原生滾動條保持一致；具有實現(xiàn)自定義滾動條的同時，保留原生滾動條的事件體系和默認(rèn)行為有益效果，且實現(xiàn)代碼簡單，絲毫不影響用戶加載網(wǎng)頁的速度。
【附圖說明】
[0013]圖1是本發(fā)明滾動條控制方法第一實施例流程示意圖；
[0014]圖2為一具體應(yīng)用場景中顯不的滾動條一實施例場景不意圖；
[0015]圖3是本發(fā)明滾動條控制方法第二實施例流程示意圖；
[0016]圖4是本發(fā)明滾動條控制方法第三實施例流程示意圖；
[0017]圖5是本發(fā)明滾動條控制方法中，根據(jù)原生滾動條操作自定義滾動條第一實施例流程示意圖；
[0018]圖6是本發(fā)明滾動條控制方法中，根據(jù)原生滾動條操作自定義滾動條第二實施例流程示意圖；
[0019]圖7是本發(fā)明滾動條控制裝置一實施例功能模塊示意圖。
[0020]本發(fā)明實施例目的的實現(xiàn)、功能特點及優(yōu)點將結(jié)合實施例，參照附圖做進(jìn)一步說明。
【具體實施方式】
[0021]以下結(jié)合說明書附圖及具體實施例進(jìn)一步說明本發(fā)明的技術(shù)方案。應(yīng)當(dāng)理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0022]圖1是本發(fā)明滾動條控制方法第一實施例流程示意圖；如圖1所示，本發(fā)明滾動條控制方法包括以下步驟:
[0023]步驟S01、將瀏覽器原生滾動條所在的原生滾動條容器嵌套到預(yù)設(shè)的一外層容器中；
[0024]本發(fā)明實施例中，通過在原生滾動條所在的容器的外層包裹一個容器，并作為承載自定義滾動條及隱藏子容器的原生滾動條的容器，如此，即可實現(xiàn)自定義滾動條樣式的同時，保留瀏覽器原生滾動條的事件體系及默認(rèn)行為。
[0025]本實施例中，瀏覽器利用HTML (Hypertext Markup Language,超文本標(biāo)記語言)的塊元素(比如div元素)作為預(yù)設(shè)的一外層容器，將原生滾動條所在的原生滾動條容器嵌套到該外層容器中。
[0026]步驟S02、監(jiān)控所述原生滾動條容器的滾動事件；
[0027]步驟S03、根據(jù)所述原生滾動條容器對應(yīng)的滾動事件，操作所述外層容器中自定義滾動條的位置，使所述自定義滾動條與所述原生滾動條保持一致。
[0028]瀏覽器實時監(jiān)控基于原生滾動條容器所觸發(fā)的操作事件，在該原生滾動條容器初始化及每次原生滾動條容器有內(nèi)容更新時，檢測該原生滾動條容器是否有滾動事件觸發(fā)；瀏覽器根據(jù)原生滾動條容器對應(yīng)的操作事件，識別是否有滾動條出現(xiàn)。也可以理解為，瀏覽器根據(jù)原生滾動條容器對應(yīng)的顯示內(nèi)容的更新或者其他操作事件，識別是否觸發(fā)了原生滾動條對應(yīng)的滾動事件。
[0029]在瀏覽器監(jiān)控到有原生滾動條對應(yīng)的滾動事件觸發(fā)時，則根據(jù)觸發(fā)的原生滾動條對應(yīng)的滾動事件，瀏覽器獲取該原生滾動條基于原始滾動條容器所滾動的具體位置；根據(jù)獲取的該原生滾動條基于原始滾動條容器所滾動的具體位置，計算獲取自定義滾動條基于外層容器的具體滾動位置，這其中包括原生滾動條的滾動方向、滾動位置，及對應(yīng)的自定義滾動條根據(jù)原生滾動條的變化，自定義滾動條自身的滾動方向和滾動位置。根據(jù)原生滾動條容器對應(yīng)的滾動事件，操作該外層容器中自定義滾動條的滾動，使得該自定義滾動條與原生滾動條的滾動保持一致。
[0030]采用上述方式，絲毫不影響瀏覽器原生滾動條的事件體系及默認(rèn)行為。圖2為一具體應(yīng)用場景中顯示的滾動條一實施例場景示意圖，在圖2所示的網(wǎng)頁中，比如瀏覽器監(jiān)聽到鼠標(biāo)滾輪滾動、上下方向按鍵的按下這些行為事件時，根據(jù)監(jiān)聽到的具體行為事件，瀏覽器操作原生滾動條執(zhí)行對應(yīng)的滾動操作，從而可以聯(lián)動顯示的自定義滾動條執(zhí)行與原生滾動條一致的滾動；在用戶享用自定義滾動條樣式的同時，絲毫不影響原生滾動條的事件體系及默認(rèn)行為。
[0031]本發(fā)明實施例將瀏覽器原生滾動條所在的原生滾動條容器嵌套到預(yù)設(shè)的一外層容器中；監(jiān)控所述原生滾動條容器的滾動事件；根據(jù)所述原生滾動條容器對應(yīng)的滾動事件，操作所述外層容器中自定義滾動條的位置，使所述自定義滾動條與所述原生滾動條保持一致；具有實現(xiàn)自定義滾動條的同時，保留原生滾動條的事件體系和默認(rèn)行為有益效果，且實現(xiàn)代碼簡單，絲毫不影響用戶加載網(wǎng)頁的速度；提高了人機的可交互性操作。
[0032]圖3是本發(fā)明滾動條控制方法第二實施例流程示意圖；本實施例與圖1所述實施例的區(qū)別是，本發(fā)明實施例瀏覽器監(jiān)控所述原生滾動條容器的滾動事件時，若監(jiān)控到原生滾動條容器有內(nèi)容更新時，需要識別外層容器是否存在自定義滾動條。
[0033]基于圖1、圖2所述實施例的具體描述，如圖3所示，本發(fā)明滾動條控制方法在圖1所述實施例的“步驟S02、監(jiān)控所述原生滾動條容器的滾動事件”之后，在“步驟S03、根據(jù)所述原生滾動條容器對應(yīng)的滾動事件，操作所述外層容器中自定義滾動條的位置，使所述自定義滾動條與所述原生滾動條保持一致”之前，還包括:
[0034]步驟S101、識別所述外層容器是否存在自定義滾動條；若是，則執(zhí)行步驟S102 ;若否，則執(zhí)行步驟S103;
[0035]步驟S102、顯示自定義滾動條；
[0036]步驟S103、創(chuàng)建自定義滾動條；將創(chuàng)建的自定義滾動條嵌入所述外層容器中，并將所述自定義滾動條定位至與所述原生滾動條的位置對應(yīng)的所述外層容器的右邊界處。
[0037]瀏覽器監(jiān)控到原生滾動條容器有內(nèi)容更新時，識別該原生滾動條容器所嵌套的外層容器是否存在自定義滾動條，即在該外層容器中，識別是否存在有自定義顯示樣式的自定義滾動條。若該外層容器中存在自定義滾動條，則直接將外層容器中存在的自定義滾動條顯示出來，供用戶查看或使用；若該外層容器中不存在自定義滾動條，則瀏覽器按照預(yù)定的滾動條創(chuàng)建規(guī)則及滾動條的顯示樣式，新創(chuàng)建一自定義滾動條，并將創(chuàng)建好的自定義滾動條嵌入該外層容器中。為了保持自定義滾動條與原生滾動條的一致性，進(jìn)一步地也為了滿足用戶的使用習(xí)慣，將新創(chuàng)建的該自定義滾動條定位至與原生滾動條的位置對應(yīng)的外層容器的右邊界處。
[0038]本發(fā)明實施例通過識別是否存在自定義滾動條，在存在自定義滾動條時將其進(jìn)行顯示,在不存在自定義滾動條時創(chuàng)建自定義滾動條，具有根據(jù)滾動條的顯示樣式靈活創(chuàng)建自定義滾動條的有益效果。
[0039]圖4是本發(fā)明滾動條控制方法第三實施例流程示意圖；本發(fā)明實施例與圖1或者圖3所述實施例的區(qū)別是，瀏覽器在監(jiān)控原生滾動條容器的操作事件的同時，監(jiān)聽用戶基于自定義滾動條所觸發(fā)的操作事件。
[0040]基于圖1、圖2和圖3所述實施例的具體描述，如圖4所示，本發(fā)明滾動條控制方法包括以下步驟:
[0041]步驟S01、將瀏覽器原生滾動條所在的原生滾動條容器嵌套到預(yù)設(shè)的一外層容器中；
[0042]本發(fā)明實施例中，通過在原生滾動條所在的容器的外層包裹一個容器，并作為承載自定義滾動條及隱藏子容器的原生滾動條的容器，如此，即可實現(xiàn)自定義滾動條樣式的同時，保留瀏覽器原生滾動條的事件體系及默認(rèn)行為。
[0043]本實施例中，瀏覽器利用HTML的塊元素(比如div元素)作為預(yù)設(shè)的一外層容器，將原生滾動條所在的原生滾動條容器嵌套到該外層容器中。