Read more

How to test if an element has scrollbars with JavaScript (Cucumber step inside)

Arne Hartherz
December 03, 2012Software engineer at makandra GmbH

The basic idea is pretty simple: an element's height is accessible via the offsetHeight property, its drawn height via scrollHeight -- if they are not the same, the browser shows scrollbars.

var hasScrollbars = element.scrollHeight != element.offsetHeight;
Illustration online protection

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

  • Prevents you from data breaches and liability risks
  • Upgrade at your own pace
  • Works with modern Rubies
Read more Show archive.org snapshot

So, in order to say something like...

Then the element "#dialog_content" should not have scrollbars

... you can use this step (only for Selenium scenarios):

Then /^the element "([^\"]+)" should( not)? have scrollbars$/ do |selector, no_scrollbars|
  scroll_height = page.execute_script("return $('#{selector}').get(0).scrollHeight;")
  offset_height = page.execute_script("return $('#{selector}').get(0).offsetHeight;")

  comparison = no_scrollbars ? '==' : '!='
  scroll_height.should.send(comparison, offset_height)
end

This should respect padding. However, I have not tested if margins have an effect on it.

Posted by Arne Hartherz to makandra dev (2012-12-03 15:02)