2

I have a div there is scroll type element like: mobile calendar scrolling.

So how can i perform it.

I have tried 

page.driver.browser.action.click_and_hold(first(".dwww .dww .dw-ul .dw-i"))
page.driver.browser.mouse.down

but could not scroll and element.

page html is:

<table cellspacing="0" cellpadding="0"><tbody><tr><td><div class="dwwl dwrc dwwl0"><div class="dwl">Month</div><div class="dwww"><div style="height:120px;min-width:70px;" class="dww"><div class="dw-ul" style="transition: all 0s ease-out 0s ; transform: translate3d(0px, -160px, 0px);"><div class="dw-bf"><div style="height:40px;line-height:40px;" data-val="0" class="dw-li dw-v"><div class="dw-i">01</div></div><div style="height:40px;line-height:40px;" data-val="1" class="dw-li dw-v"><div class="dw-i">02</div></div><div style="height:40px;line-height:40px;" data-val="2" class="dw-li dw-v"><div class="dw-i">03</div></div><div style="height:40px;line-height:40px;" data-val="3" class="dw-li dw-v"><div class="dw-i">04</div></div><div style="height:40px;line-height:40px;" data-val="4" class="dw-li dw-v"><div class="dw-i">05</div></div><div style="height:40px;line-height:40px;" data-val="5" class="dw-li dw-sel dw-v"><div class="dw-i">06</div></div><div style="height:40px;line-height:40px;" data-val="6" class="dw-li dw-v"><div class="dw-i">07</div></div><div style="height:40px;line-height:40px;" data-val="7" class="dw-li dw-v"><div class="dw-i">08</div></div><div style="height:40px;line-height:40px;" data-val="8" class="dw-li dw-v"><div class="dw-i">09</div></div><div style="height:40px;line-height:40px;" data-val="9" class="dw-li dw-v"><div class="dw-i">10</div></div><div style="height:40px;line-height:40px;" data-val="10" class="dw-li dw-v"><div class="dw-i">11</div></div><div style="height:40px;line-height:40px;" data-val="11" class="dw-li dw-v"><div class="dw-i">12</div></div></div></div><div class="dwwol"></div></div><div class="dwwo"></div></div><div class="dwwol"></div></div></td><td><div class="dwwl dwrc dwwl1"><div class="dwl">Day</div><div class="dwww"><div style="height:120px;min-width:70px;" class="dww"><div class="dw-ul" style="transition: all 0s ease-out 0s ; transform: translate3d(0px, -640px, 0px);"><div class="dw-bf"><div style="height:40px;line-height:40px;" data-val="1" class="dw-li dw-v"><div class="dw-i">01</div></div><div style="height:40px;line-height:40px;" data-val="2" class="dw-li dw-v"><div class="dw-i">02</div></div><div style="height:40px;line-height:40px;" data-val="3" class="dw-li dw-v"><div class="dw-i">03</div></div><div style="height:40px;line-height:40px;" data-val="4" class="dw-li dw-v"><div class="dw-i">04</div></div><div style="height:40px;line-height:40px;" data-val="5" class="dw-li dw-v"><div class="dw-i">05</div></div><div style="height:40px;line-height:40px;" data-val="6" class="dw-li dw-v"><div class="dw-i">06</div></div><div style="height:40px;line-height:40px;" data-val="7" class="dw-li dw-v"><div class="dw-i">07</div></div><div style="height:40px;line-height:40px;" data-val="8" class="dw-li dw-v"><div class="dw-i">08</div></div><div style="height:40px;line-height:40px;" data-val="9" class="dw-li dw-v"><div class="dw-i">09</div></div><div style="height:40px;line-height:40px;" data-val="10" class="dw-li dw-v"><div class="dw-i">10</div></div><div style="height:40px;line-height:40px;" data-val="11" class="dw-li dw-v"><div class="dw-i">11</div></div><div style="height:40px;line-height:40px;" data-val="12" class="dw-li dw-v"><div class="dw-i">12</div></div><div style="height:40px;line-height:40px;" data-val="13" class="dw-li dw-v"><div class="dw-i">13</div></div><div style="height:40px;line-height:40px;" data-val="14" class="dw-li dw-v"><div class="dw-i">14</div></div><div style="height:40px;line-height:40px;" data-val="15" class="dw-li dw-v"><div class="dw-i">15</div></div><div style="height:40px;line-height:40px;" data-val="16" class="dw-li dw-v"><div class="dw-i">16</div></div><div style="height:40px;line-height:40px;" data-val="17" class="dw-li dw-v"><div class="dw-i">17</div></div><div style="height:40px;line-height:40px;" data-val="18" class="dw-li dw-sel dw-v"><div class="dw-i">18</div></div><div style="height:40px;line-height:40px;" data-val="19" class="dw-li dw-v"><div class="dw-i">19</div></div></div><div class="dw-bf"><div style="height:40px;line-height:40px;" data-val="20" class="dw-li dw-v"><div class="dw-i">20</div></div><div style="height:40px;line-height:40px;" data-val="21" class="dw-li dw-v"><div class="dw-i">21</div></div><div style="height:40px;line-height:40px;" data-val="22" class="dw-li dw-v"><div class="dw-i">22</div></div><div style="height:40px;line-height:40px;" data-val="23" class="dw-li dw-v"><div class="dw-i">23</div></div><div style="height:40px;line-height:40px;" data-val="24" class="dw-li dw-v"><div class="dw-i">24</div></div><div style="height:40px;line-height:40px;" data-val="25" class="dw-li dw-v"><div class="dw-i">25</div></div><div style="height:40px;line-height:40px;" data-val="26" class="dw-li dw-v"><div class="dw-i">26</div></div><div style="height:40px;line-height:40px;" data-val="27" class="dw-li dw-v"><div class="dw-i">27</div></div><div style="height:40px;line-height:40px;" data-val="28" class="dw-li dw-v"><div class="dw-i">28</div></div><div style="height:40px;line-height:40px;" data-val="29" class="dw-li dw-v"><div class="dw-i">29</div></div><div style="height:40px;line-height:40px;" data-val="30" class="dw-li dw-v"><div class="dw-i">30</div></div><div style="height:40px;line-height:40px;" data-val="31" class="dw-li dw-h"><div class="dw-i">31</div></div></div></div><div class="dwwol"></div></div><div class="dwwo"></div></div><div class="dwwol"></div></div></td><td><div class="dwwl dwrc dwwl2"><div class="dwl">Year</div><div class="dwww"><div style="height:120px;min-width:70px;" class="dww"><div class="dw-ul" style="transition: all 0s ease-out 0s ; transform: translate3d(0px, -3120px, 0px);"><div class="dw-bf"><div style="height:40px;line-height:40px;" data-val="1913" class="dw-li dw-v"><div class="dw-i">13</div></div><div style="height:40px;line-height:40px;" data-val="1914" class="dw-li dw-v"><div class="dw-i">14</div></div><div style="height:40px;line-height:40px;" data-val="1915" class="dw-li dw-v"><div class="dw-i">15</div></div><div style="height:40px;line-height:40px;" data-val="1916" class="dw-li dw-v"><div class="dw-i">16</div></div><div style="height:40px;line-height:40px;" data-val="1917" class="dw-li dw-v"><div class="dw-i">17</div></div><div style="height:40px;line-height:40px;" data-val="1918" class="dw-li dw-v"><div class="dw-i">18</div></div><div style="height:40px;line-height:40px;" data-val="1919" class="dw-li dw-v"><div class="dw-i">19</div></div><div style="height:40px;line-height:40px;" data-val="1920" class="dw-li dw-v"><div class="dw-i">20</div></div><div style="height:40px;line-height:40px;" data-val="1921" class="dw-li dw-v"><div class="dw-i">21</div></div><div style="height:40px;line-height:40px;" data-val="1922" class="dw-li dw-v"><div class="dw-i">22</div></div><div style="height:40px;line-height:40px;" data-val="1923" class="dw-li dw-v"><div class="dw-i">23</div></div><div style="height:40px;line-height:40px;" data-val="1924" class="dw-li dw-v"><div class="dw-i">24</div></div><div style="height:40px;line-height:40px;" data-val="1925" class="dw-li dw-v"><div class="dw-i">25</div></div><div style="height:40px;line-height:40px;" data-val="1926" class="dw-li dw-v"><div class="dw-i">26</div></div><div style="height:40px;line-height:40px;" data-val="1927" class="dw-li dw-v"><div class="dw-i">27</div></div><div style="height:40px;line-height:40px;" data-val="1928" class="dw-li dw-v"><div class="dw-i">28</div></div><div style="height:40px;line-height:40px;" data-val="1929" class="dw-li dw-v"><div class="dw-i">29</div></div><div style="height:40px;line-height:40px;" data-val="1930" class="dw-li dw-v"><div class="dw-i">30</div></div><div style="height:40px;line-height:40px;" data-val="1931" class="dw-li dw-v"><div class="dw-i">31</div></div></div><div class="dw-bf"><div style="height:40px;line-height:40px;" data-val="1932" class="dw-li dw-v"><div class="dw-i">32</div></div><div style="height:40px;line-height:40px;" data-val="1933" class="dw-li dw-v"><div class="dw-i">33</div></div><div style="height:40px;line-height:40px;" data-val="1934" class="dw-li dw-v"><div class="dw-i">34</div></div><div style="height:40px;line-height:40px;" data-val="1935" class="dw-li dw-v"><div class="dw-i">35</div></div><div style="height:40px;line-height:40px;" data-val="1936" class="dw-li dw-v"><div class="dw-i">36</div></div><div style="height:40px;line-height:40px;" data-val="1937" class="dw-li dw-v"><div class="dw-i">37</div></div><div style="height:40px;line-height:40px;" data-val="1938" class="dw-li dw-v"><div class="dw-i">38</div></div><div style="height:40px;line-height:40px;" data-val="1939" class="dw-li dw-v"><div class="dw-i">39</div></div><div style="height:40px;line-height:40px;" data-val="1940" class="dw-li dw-v"><div class="dw-i">40</div></div><div style="height:40px;line-height:40px;" data-val="1941" class="dw-li dw-v"><div class="dw-i">41</div></div><div style="height:40px;line-height:40px;" data-val="1942" class="dw-li dw-v"><div class="dw-i">42</div></div><div style="height:40px;line-height:40px;" data-val="1943" class="dw-li dw-v"><div class="dw-i">43</div></div><div style="height:40px;line-height:40px;" data-val="1944" class="dw-li dw-v"><div class="dw-i">44</div></div><div style="height:40px;line-height:40px;" data-val="1945" class="dw-li dw-v"><div class="dw-i">45</div></div><div style="height:40px;line-height:40px;" data-val="1946" class="dw-li dw-v"><div class="dw-i">46</div></div><div style="height:40px;line-height:40px;" data-val="1947" class="dw-li dw-v"><div class="dw-i">47</div></div><div style="height:40px;line-height:40px;" data-val="1948" class="dw-li dw-v"><div class="dw-i">48</div></div><div style="height:40px;line-height:40px;" data-val="1949" class="dw-li dw-v"><div class="dw-i">49</div></div><div style="height:40px;line-height:40px;" data-val="1950" class="dw-li dw-v"><div class="dw-i">50</div></div><div style="height:40px;line-height:40px;" data-val="1951" class="dw-li dw-v"><div class="dw-i">51</div></div></div><div class="dw-bf"><div style="height:40px;line-height:40px;" data-val="1952" class="dw-li dw-v"><div class="dw-i">52</div></div><div style="height:40px;line-height:40px;" data-val="1953" class="dw-li dw-v"><div class="dw-i">53</div></div><div style="height:40px;line-height:40px;" data-val="1954" class="dw-li dw-v"><div class="dw-i">54</div></div><div style="height:40px;line-height:40px;" data-val="1955" class="dw-li dw-v"><div class="dw-i">55</div></div><div style="height:40px;line-height:40px;" data-val="1956" class="dw-li dw-v"><div class="dw-i">56</div></div><div style="height:40px;line-height:40px;" data-val="1957" class="dw-li dw-v"><div class="dw-i">57</div></div><div style="height:40px;line-height:40px;" data-val="1958" class="dw-li dw-v"><div class="dw-i">58</div></div><div style="height:40px;line-height:40px;" data-val="1959" class="dw-li dw-v"><div class="dw-i">59</div></div><div style="height:40px;line-height:40px;" data-val="1960" class="dw-li dw-v"><div class="dw-i">60</div></div><div style="height:40px;line-height:40px;" data-val="1961" class="dw-li dw-v"><div class="dw-i">61</div></div><div style="height:40px;line-height:40px;" data-val="1962" class="dw-li dw-v"><div class="dw-i">62</div></div><div style="height:40px;line-height:40px;" data-val="1963" class="dw-li dw-v"><div class="dw-i">63</div></div><div style="height:40px;line-height:40px;" data-val="1964" class="dw-li dw-v"><div class="dw-i">64</div></div><div style="height:40px;line-height:40px;" data-val="1965" class="dw-li dw-v"><div class="dw-i">65</div></div><div style="height:40px;line-height:40px;" data-val="1966" class="dw-li dw-v"><div class="dw-i">66</div></div><div style="height:40px;line-height:40px;" data-val="1967" class="dw-li dw-v"><div class="dw-i">67</div></div><div style="height:40px;line-height:40px;" data-val="1968" class="dw-li dw-v"><div class="dw-i">68</div></div><div style="height:40px;line-height:40px;" data-val="1969" class="dw-li dw-v"><div class="dw-i">69</div></div><div style="height:40px;line-height:40px;" data-val="1970" class="dw-li dw-v"><div class="dw-i">70</div></div><div style="height:40px;line-height:40px;" data-val="1971" class="dw-li dw-v"><div class="dw-i">71</div></div></div><div class="dw-bf"><div style="height:40px;line-height:40px;" data-val="1972" class="dw-li dw-v"><div class="dw-i">72</div></div><div style="height:40px;line-height:40px;" data-val="1973" class="dw-li dw-v"><div class="dw-i">73</div></div><div style="height:40px;line-height:40px;" data-val="1974" class="dw-li dw-v"><div class="dw-i">74</div></div><div style="height:40px;line-height:40px;" data-val="1975" class="dw-li dw-v"><div class="dw-i">75</div></div><div style="height:40px;line-height:40px;" data-val="1976" class="dw-li dw-v"><div class="dw-i">76</div></div><div style="height:40px;line-height:40px;" data-val="1977" class="dw-li dw-v"><div class="dw-i">77</div></div><div style="height:40px;line-height:40px;" data-val="1978" class="dw-li dw-v"><div class="dw-i">78</div></div><div style="height:40px;line-height:40px;" data-val="1979" class="dw-li dw-v"><div class="dw-i">79</div></div><div style="height:40px;line-height:40px;" data-val="1980" class="dw-li dw-v"><div class="dw-i">80</div></div><div style="height:40px;line-height:40px;" data-val="1981" class="dw-li dw-v"><div class="dw-i">81</div></div><div style="height:40px;line-height:40px;" data-val="1982" class="dw-li dw-v"><div class="dw-i">82</div></div><div style="height:40px;line-height:40px;" data-val="1983" class="dw-li dw-v"><div class="dw-i">83</div></div><div style="height:40px;line-height:40px;" data-val="1984" class="dw-li dw-v"><div class="dw-i">84</div></div><div style="height:40px;line-height:40px;" data-val="1985" class="dw-li dw-v"><div class="dw-i">85</div></div><div style="height:40px;line-height:40px;" data-val="1986" class="dw-li dw-v"><div class="dw-i">86</div></div><div style="height:40px;line-height:40px;" data-val="1987" class="dw-li dw-v"><div class="dw-i">87</div></div><div style="height:40px;line-height:40px;" data-val="1988" class="dw-li dw-v"><div class="dw-i">88</div></div><div style="height:40px;line-height:40px;" data-val="1989" class="dw-li dw-v"><div class="dw-i">89</div></div><div style="height:40px;line-height:40px;" data-val="1990" class="dw-li dw-v"><div class="dw-i">90</div></div><div style="height:40px;line-height:40px;" data-val="1991" class="dw-li dw-v"><div class="dw-i">91</div></div></div><div class="dw-bf"><div style="height:40px;line-height:40px;" data-val="1992" class="dw-li dw-v dw-sel"><div class="dw-i">92</div></div><div style="height:40px;line-height:40px;" data-val="1993" class="dw-li dw-v"><div class="dw-i">93</div></div><div style="height:40px;line-height:40px;" data-val="1994" class="dw-li dw-v"><div class="dw-i">94</div></div><div style="height:40px;line-height:40px;" data-val="1995" class="dw-li dw-v"><div class="dw-i">95</div></div></div></div><div class="dwwol"></div></div><div class="dwwo"></div></div><div class="dwwol"></div></div></td></tr></tbody></table>
Improve this question
0

1 Answer 1

Reset to default
1

You need to look around Class: Selenium::WebDriver::ActionBuilder. I didn't see your html code. But I used Wikipedia official page to illustrate the scrolling functionality.The below code will work. You will see that page will be auto scrolled down to the Wiktionary.

require 'selenium-webdriver'

driver = Selenium::WebDriver.for :firefox
driver.get "http://www.wikipedia.org/"

el = driver.find_elements(:css, "div.otherprojects-item > div > a")
p el[1].text #=> "Wiktionary"
driver.action.move_to(el[1]).perform

Try the above and let me know. I didn't test,looking for your feedback.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

@user2455048 so any error you encountered or what? also please metntion your ruby and selenium-webdriver version.
I doesn't get any error. but this is not working. I am using jruby-1.7.3 and selenium-webdriver (2.33.0)
@user2455048 when you run the code, you should see you will be auto scrolled to the below page to the element Wiktionary. Does it not happen? So what are you seeing when you run the code?
For those wanting the answer to this in Java, the class you are looking for is called Actions. selenium.googlecode.com/git/docs/api/java/org/openqa/selenium/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.