[0044]步驟S11、監(jiān)控用戶基于自定義滾動(dòng)條所觸發(fā)的滾動(dòng)事件；
[0045]本發(fā)明實(shí)施例中，瀏覽器監(jiān)控原生滾動(dòng)條對應(yīng)的滾動(dòng)事件的同時(shí)，監(jiān)控用戶基于自定義滾動(dòng)條所觸發(fā)的操作事件。從監(jiān)控到的用戶基于自定義滾動(dòng)條所觸發(fā)的操作事件中，瀏覽器識別出自定義滾動(dòng)條的滾動(dòng)事件，從而響應(yīng)該自定義滾動(dòng)條的滾動(dòng)事件，執(zhí)行對應(yīng)操作。
[0046]步驟S12、根據(jù)用戶基于自定義滾動(dòng)條所觸發(fā)的滾動(dòng)事件，觸發(fā)所述原生滾動(dòng)條對應(yīng)的滾動(dòng)事件，從而聯(lián)動(dòng)改變所述自定義滾動(dòng)條的對應(yīng)位置。
[0047]瀏覽器根據(jù)監(jiān)控到的用戶基于自定義滾動(dòng)條所觸發(fā)的滾動(dòng)事件，響應(yīng)該自定義滾動(dòng)條所對應(yīng)的滾動(dòng)事件，獲取該自定義滾動(dòng)條的滾動(dòng)方向及滾動(dòng)位置；根據(jù)獲取的該自定義滾動(dòng)條的滾動(dòng)方向及滾動(dòng)位置，觸發(fā)原生滾動(dòng)條對應(yīng)的滾動(dòng)事件；即觸發(fā)原生滾動(dòng)條相對于原生滾動(dòng)條容器執(zhí)行相應(yīng)的滾動(dòng)方向及滾動(dòng)位置；進(jìn)而再根據(jù)原生滾動(dòng)條的滾動(dòng)事件，聯(lián)動(dòng)改變自定義滾動(dòng)條的對應(yīng)位置。
[0048]本實(shí)施例中，瀏覽器根據(jù)用戶基于自定義滾動(dòng)條所觸發(fā)的滾動(dòng)事件，觸發(fā)所述原生滾動(dòng)條對應(yīng)的滾動(dòng)事件，包括:
[0049]根據(jù)用戶基于自定義滾動(dòng)條所觸發(fā)的滾動(dòng)事件，比如，瀏覽器監(jiān)控用戶基于自定義滾動(dòng)條執(zhí)行的鼠標(biāo)拖動(dòng)自定義滾動(dòng)條的滾動(dòng)事件時(shí)，瀏覽器獲取所述滾動(dòng)事件對應(yīng)的自定義滾動(dòng)條在垂直方向和/或水平方向的位移；同時(shí)，獲取外層容器對應(yīng)的顯示內(nèi)容高度和/或顯示內(nèi)容寬度，以及原生滾動(dòng)條容器高度和/或原生滾動(dòng)條容器寬度；
[0050]當(dāng)該自定義滾動(dòng)條在垂直方向移動(dòng)時(shí)，利用獲取的垂直方向位移除以所述顯示內(nèi)容高度，再乘以所述原生滾動(dòng)條容器高度，獲取所述原生滾動(dòng)條在垂直方向上的滾動(dòng)位置；所述位移為水平方向位移時(shí)，利用獲取的水平方向位移除以所述顯示內(nèi)容寬度，再乘以所述原生滾動(dòng)條容器寬度，獲取所述原生滾動(dòng)條在水平方向上的滾動(dòng)位置；根據(jù)獲取的所述原生滾動(dòng)條在垂直方向和/或水平方向上的滾動(dòng)位置，操作所述原生滾動(dòng)條至所述滾動(dòng)位置。
[0051]本發(fā)明實(shí)施例瀏覽器在監(jiān)控原生滾動(dòng)條對應(yīng)的操作事件的同時(shí)，監(jiān)控自定義滾動(dòng)條對應(yīng)的滾動(dòng)事件，并根據(jù)自定義滾動(dòng)條對應(yīng)的滾動(dòng)事件，觸發(fā)原生滾動(dòng)條的操作事件，從而聯(lián)動(dòng)改變自定義滾動(dòng)條滾動(dòng)至相應(yīng)位置；具有使自定義滾動(dòng)條與原生滾動(dòng)條二者相互兼容的有益效果。
[0052]圖5是本發(fā)明滾動(dòng)條控制方法中，根據(jù)原生滾動(dòng)條操作自定義滾動(dòng)條第一實(shí)施例流程示意圖；本實(shí)施例僅對根據(jù)原生滾動(dòng)條操作自定義滾動(dòng)條這一操作步驟進(jìn)行進(jìn)一步地描述，有關(guān)本發(fā)明滾動(dòng)條控制方法所涉及的其他步驟請參照相關(guān)實(shí)施例的具體描述，在此不再贅述。
[0053]如圖5所示，本發(fā)明滾動(dòng)條控制方法中，根據(jù)所述原生滾動(dòng)條容器對應(yīng)的滾動(dòng)事件，操作所述外層容器中自定義滾動(dòng)條的位置，包括:
[0054]步驟S21、檢測所述原生滾動(dòng)條容器是否有滾動(dòng)條出現(xiàn)；在原生滾動(dòng)條容器有滾動(dòng)條出現(xiàn)時(shí)，執(zhí)行步驟S22 ；
[0055]瀏覽器監(jiān)測到原生滾動(dòng)條容器的滾動(dòng)事件時(shí)，檢測該原生滾動(dòng)條容器中是否有滾動(dòng)條出現(xiàn)；在該原生滾動(dòng)容器中沒有滾動(dòng)條出現(xiàn)時(shí)，若是首次執(zhí)行本發(fā)明實(shí)施例滾動(dòng)條控制方法，則瀏覽器繼續(xù)監(jiān)控原生滾動(dòng)條容器的操作事件。
[0056]步驟S22、分別獲取原生滾動(dòng)條容器及外層容器對應(yīng)的參數(shù)；
[0057]若瀏覽器檢測到原生滾動(dòng)條容器有滾動(dòng)條出現(xiàn)時(shí)，瀏覽器獲取原生滾動(dòng)條容器及外層容器對應(yīng)的參數(shù)；上述參數(shù)包括:原生滾動(dòng)條容器所對應(yīng)的顯示內(nèi)容寬度al、顯示內(nèi)容高度bl、顯示內(nèi)容的滾動(dòng)位置高度Cl以及原生滾動(dòng)條容器高度h1、外層容器對應(yīng)的外層容器高度h2。
[0058]步驟S23、根據(jù)獲取的原生滾動(dòng)條容器及外層容器對應(yīng)的參數(shù)，以及原生滾動(dòng)條在原生滾動(dòng)條容器中的位置，計(jì)算自定義滾動(dòng)條在所述外層容器中的位置；
[0059]步驟S24、根據(jù)計(jì)算結(jié)果，操作所述外層容器中自定義滾動(dòng)條的位置。
[0060]根據(jù)獲取的原生滾動(dòng)條容器所對應(yīng)的顯示內(nèi)容高度bl、顯示內(nèi)容的滾動(dòng)位置高度Cl以及原生滾動(dòng)條容器高度h1、外層容器高度h2，計(jì)算得到顯示內(nèi)容高度bl與原生滾動(dòng)條容器高度hi的高度比值xl ;利用所述高度比值xl乘以所述外層容器高度h2，得到自定義滾動(dòng)條在外層容器中對應(yīng)的顯示內(nèi)容高度b2 ;利用所述高度比值xl乘以所述顯示內(nèi)容的滾動(dòng)位置高度Cl，得到所述自定義滾動(dòng)條在外層容器中的滾動(dòng)位置高度c2。根據(jù)計(jì)算出的自定義滾動(dòng)條對應(yīng)的外層容器中，顯示內(nèi)容高度b2及自定義滾動(dòng)條在外層容器中的滾動(dòng)位置高度c2，操作該外層容器中對應(yīng)的自定義滾動(dòng)條的位置。
[0061 ] 本實(shí)施例中各參數(shù)的數(shù)值所對應(yīng)的單位均以像素?cái)?shù)來計(jì)算。
[0062]本發(fā)明實(shí)施例根據(jù)原生滾動(dòng)條容器對應(yīng)的滾動(dòng)事件，操作外層容器中自定義滾動(dòng)條的位置；具有根據(jù)原生滾動(dòng)條對應(yīng)的滾動(dòng)事件，實(shí)時(shí)對應(yīng)操作自定義滾動(dòng)條的有益效果。
[0063]圖6是本發(fā)明滾動(dòng)條控制方法中，根據(jù)原生滾動(dòng)條操作自定義滾動(dòng)條第二實(shí)施例流程示意圖；本實(shí)施例與圖5所述實(shí)施例的區(qū)別是，在瀏覽器檢測到原生滾動(dòng)條容器有滾動(dòng)條出現(xiàn)時(shí)，在“步驟S22、分別獲取原生滾動(dòng)條容器及外層容器對應(yīng)的參數(shù)”之前，增加了:
[0064]步驟S20、將原生滾動(dòng)條容器增加一預(yù)設(shè)寬度值，并設(shè)置所述原生滾動(dòng)條容器為層疊樣式，同時(shí)，在所述原生滾動(dòng)條容器的內(nèi)容部分增加所述預(yù)設(shè)寬度值的右填充。
[0065]基于上述實(shí)施例的具體描述，本實(shí)施例中，瀏覽器檢測到原生滾動(dòng)條容器有滾動(dòng)條出現(xiàn)時(shí)，將原生滾動(dòng)條容器增加預(yù)設(shè)寬度值，并設(shè)置所述原生滾動(dòng)條容器為層疊樣式，同時(shí)，在所述原生滾動(dòng)條容器的內(nèi)容部分增加所述預(yù)設(shè)寬度值的右填充。
[0066]在具體的應(yīng)用場景中，該預(yù)設(shè)寬度值的取值為大于等于17像素。比如，在瀏覽器監(jiān)控到有滾動(dòng)條出現(xiàn)時(shí)，將原生滾動(dòng)條容器增加至少17像素，并設(shè)置CSS(Cascading StyleSheets,層疊樣式表)樣式:
[0067]::-webkit-scrollbar {width:O;height:0;};這樣做的目的是，為了防止 chrome和safari等webkit內(nèi)核的瀏覽器出現(xiàn)滾動(dòng)條時(shí),在鼠標(biāo)拖拽的情況下，出現(xiàn)滾動(dòng)條無法隱藏的問題；同時(shí)，在該原生滾動(dòng)條容器的右邊新增同等大小的內(nèi)填充(padding-right)即上述右填充，保證新增寬度后原生滾動(dòng)條被外層容器隱藏的同時(shí)，原生滾動(dòng)條容器的內(nèi)容部分的寬度不變；在實(shí)際應(yīng)用中，瀏覽器對于原生滾動(dòng)條容器的內(nèi)容部分也可以根據(jù)自定義滾動(dòng)條的大小，對其進(jìn)行微調(diào)。
[0068]基于以上描述，在圖5所述實(shí)施例中，瀏覽器監(jiān)測到原生滾動(dòng)條容器的滾動(dòng)事件時(shí)，檢測該原生滾動(dòng)條容器中是否有滾動(dòng)條出現(xiàn)；在該原生滾動(dòng)容器中沒有滾動(dòng)條出現(xiàn)時(shí)，執(zhí)行如下步驟:
[0069]步驟S25、還原原生滾動(dòng)條容器的寬度，并去掉增加的右填充；
[0070]若是瀏覽器已執(zhí)行了增加原生滾動(dòng)條容器寬度的操作，則在原生滾動(dòng)容器中沒有滾動(dòng)條出現(xiàn)時(shí)，瀏覽器還原所述原生滾動(dòng)條容器的寬度，并去掉增加的所述右填充。
[0071]本發(fā)明實(shí)施例將原生滾動(dòng)條容器增加一預(yù)設(shè)寬度值，并設(shè)置所述原生滾動(dòng)條容器為層疊樣式；避免了針對部分瀏覽器在出現(xiàn)滾動(dòng)條時(shí)，在鼠標(biāo)拖拽的情況下，出現(xiàn)滾動(dòng)條無法隱藏的問題；同時(shí)，在該原生滾動(dòng)條容器的右邊新增同等大小的右填充，具有保證新增寬度后原生滾動(dòng)條被外層容器隱藏的同時(shí)，原生滾動(dòng)條容器的內(nèi)容部分的寬度不變的有益效果O
[0072]圖7是本發(fā)明滾動(dòng)條控制裝置第一實(shí)施例功能模塊示意圖；如圖7所示，本發(fā)明滾動(dòng)條控制裝置包括:設(shè)置模塊01、監(jiān)控模塊02和控制模塊03。
[0073]設(shè)置模塊01，用于將瀏覽器原生滾動(dòng)條所在的原生滾動(dòng)條容器嵌套到預(yù)設(shè)的一外層容器中；
[0074]本發(fā)明實(shí)施例中，設(shè)置模塊01在原生滾動(dòng)條所在的容器的外層包裹一個(gè)容器，并作為承載自定義滾動(dòng)條及隱藏子容器的原生滾動(dòng)條的容器，如此，即可實(shí)現(xiàn)自定義滾動(dòng)條樣式的同時(shí)，保留瀏覽器原生滾動(dòng)條的事件體系及默認(rèn)行為。
[0075]本實(shí)施例中，設(shè)置模塊01利用HTML的塊元素(比如div元素)作為預(yù)設(shè)的一外層容器，將原生滾動(dòng)條所在的原生滾動(dòng)條容器嵌套到該外層容器中。
[0076]監(jiān)控模塊02，用于監(jiān)控所述原生滾動(dòng)條容器的滾動(dòng)事件；
[0077]控制模塊03，用于根據(jù)所述原生滾動(dòng)條容器對應(yīng)的滾動(dòng)事件，操作所述外層容器中自定義滾動(dòng)條的位置，使所述自定義滾動(dòng)條與所述原生滾動(dòng)條保持一致。
[0078]監(jiān)控模塊02實(shí)時(shí)監(jiān)控基于原生滾動(dòng)條容器所觸發(fā)的操作事件，在該原生滾動(dòng)條容器初始化及每次原生滾動(dòng)條容器有內(nèi)容更新時(shí)，檢測該原生滾動(dòng)條容器是否有滾動(dòng)事件觸發(fā)；監(jiān)控模塊02根據(jù)原生滾動(dòng)條容器對應(yīng)的操作事件，識別是否有滾動(dòng)條出現(xiàn)。也可以理解為，監(jiān)控模塊02根據(jù)原生滾動(dòng)條容器對應(yīng)的顯示內(nèi)容的更新或者其他操作事件，識別是否觸發(fā)了原生滾動(dòng)條對應(yīng)的滾動(dòng)事件。
[0079]在監(jiān)控模塊02監(jiān)控到有原生滾動(dòng)條對應(yīng)的滾動(dòng)事件觸發(fā)時(shí)，控制模塊03根據(jù)觸發(fā)的原生滾動(dòng)條對應(yīng)的滾動(dòng)事件，獲取該原生滾動(dòng)條基于原始滾動(dòng)條容器所滾動(dòng)的具體位置；控制模塊03根據(jù)獲取的該原生滾動(dòng)條基于原始滾動(dòng)條容器所滾動(dòng)的具體位置，計(jì)算獲取自定義滾動(dòng)條基于外層容器的具體滾動(dòng)位置，這其中包括原生滾動(dòng)條的滾動(dòng)方向、滾動(dòng)位置，及對應(yīng)的自定義滾動(dòng)條根據(jù)原生滾動(dòng)條