差異處

這裏顯示兩個版本的差異處。

--- rf:rf:ctl_scrollbar_of_div [2018/12/07 17:05]
tony 建立
+++ rf:rf:ctl_scrollbar_of_div [2023/06/25 09:48] (目前版本)
@@ 行 1: / 行 1: @@
+{{tag>RobotFramework}}
 ====== RobotFramework: 如何控制div上的scrollbar? ======
 ===== Problem =====
+在使用grid呈現大量資料時，很有可能會發生畫面的長度無法呈現出所有內容；因此在div的style中，會搭配overflow: auto讓長度不足時顯示出scrollbar，如下:\\
+{{:rf:rf:rf_panel_with_scroll_bar.png|}}\\
+\\
+而我在使用Get Text去取得如畫面較右方(index大概第10個)的內容時，都會找不到對應的element；使用Get Source或Get Element Count也都拿不到如預期的資料與數量。經過測試，發現只要將scrollbar往右移就可以解決我們的問題。本篇文章要分享給大家控制div scrollbar的方法。
+===== How to resolve? =====
+我們主要的解決方式是透過Execute Javascript去控制div中的scrollbar，會使用到DOM element的兩個屬性:
+  * Element.scrollLeft: 控制橫向scrollbar位置。
+  * Element.scrollTop: 控制垂直scrollbar位置。
+假設我們要針對class為viewport element的橫向scrollbar做操作，會這樣寫:
+<code bash>
+Execute Javascript | document.getElementByClassName('viewport')[1].scrollLeft = 500
+</code>
+如果要對id為grid的垂直scrollbar做操作，會這樣寫:
+<code bash>
+Execute Javascript | document.getElementById('grid').scrollTop = 500
+</code>
+在寫之前，可以先嘗試使用瀏覽器的debug console實驗一下。
+===== Reference =====
+  * [[https://blog.csdn.net/huilan_same/article/details/52131277|selenium之 如何控制网页内嵌div中滚动条的滚动]]
+  * [[https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft|Element.scrollLeft]]
-===== How to? =====
+=====    =====
+----
+\\
+~~DISQUS~~