-2

These websites that say "please remove adblocker". They have an overlayer div (which you can delete) and a div somewhere with overflow:hidden

I usually find it quick, but I'm unable to find it in forbes website.

So this is more of a challenge to my CSS chops. So far I've tried this 

var elems = document.querySelectorAll('*');
for (var i = 0; i < elems.length; i++) {
  if (elems[i].style.overflowY === "hidden") {
    console.log(elems[i])
  }
}

And I got nothing. I tried with just overflow and still got nothing.

I there another way to find which element has the overflow:hidden? Or is there some other way forbs is disabling scrolling?

Federico klez Culloca
  • 26,308
  • 17
  • 56
  • 95
relidon
  • 2,142
  • 4
  • 21
  • 37
  • Does this answer your question? [Determine if an HTML element's content overflows](https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows) – mitkosoft Jan 13 '20 at 10:17

2 Answers2

1

Use window.getComputedStyle method and then getPropertyValue method to get the computed style value. Refer - https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

  let myDiv = document.querySelector('.myDiv');
  
  const computedStyle = window.getComputedStyle(myDiv);
  console.log(computedStyle.getPropertyValue('overflow'));
.myDiv {  
  overflow: hidden;
}
<div class="myDiv">
  Hello World
</div>
Aditya Bhave
  • 998
  • 1
  • 5
  • 10
-1

It seems that the correct prop is 'overflow' according to W3C

object.style.overflow = "visible|hidden|scroll|auto|initial|inherit"

So if Forbes disable scrolling with the overflow = 'hidden' technique, using 

let elems = document.querySelectorAll('*');
for (var i = 0; i < elems.length; i++) {
  if (elems[i].style.overflow === "hidden") console.log(elems[i]);
}

should work.

Notes:

  • use 'let' or 'const' over 'var'
  • no need for curly braces after the 'if' in that case.

You can also create a function using ES6 features and array methods for reusability:

function showElementsWithHiddenOverflow() {
        [...document.querySelectorAll('*')]
           .filter(elt => elt.style.overflow === 'hidden')
           .map(elt => console.log(elt))
};

showElementsWithHiddenOverflow();

You could even have more fun and create a higher-order function that accept two parameters, the style property you are looking for and the value and return a function.

Could you give us the link to the Forbes website so we can try to find the issue?

Alo
  • 31
  • 1
  • 3