Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

inViewport falsely returns true

See original GitHub issue

I attached verge.inViewport to a scroll event to test this.

When I start scrolling I keep getting true returned even if the element is not in the viewport. Only after I scroll past the desired element, false is returned.

If I scroll back up past that element, it’s still true.

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:11 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
ryanvecommented, Nov 5, 2017

Whoa I just figured out why the local differs from the codepen. Local has no doctype, If you add one then it works as expected! Discovered via S/O

<!DOCTYPE html>

So we either could warn about this in the readme and/or attempt a solution that works regardless.

1reaction
ramtinsoltanicommented, Oct 29, 2017

@ryanve Well I’ve made this codepen using the link to load verge, and it’s working! But using the same link in a local .html file (or downloading verge.js and loading it locally) still behaves as before! I’m using Chrome 62.0.3202.62 64-bit on Windows 10.

So to reproduce it, copy the code below and save them as local files. Then run the .html file and you should run into the issue I’m having when you look at the Dev Tools console. These are the exact code I’m using locally (same as codepen but the html contains a script tag to load the javascript after loading verge):

index.html

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/verge@1.10.2/verge.js"></script>
    <script src="./script.js"></script>
  </head>
  <body>
    <div style="height:2000px;"></div>
    <div id="testme" style="width: 100%; height: 500px; background-color: red;"></div>
    <div style="height:2000px;"></div>
  </body>
</html>

script.js

window.addEventListener('scroll', function(e) {

  let test = $('#testme').get(0);

  if ( verge.inViewport(test, -1) ) {

    test.style.backgroundColor = "blue";
    console.log('TRUE');

  } else {

    test.style.backgroundColor = "red";
    console.log('FALSE');

  }

});

When you scroll all the way down, these are the different console logs:

Codepen output (the correct output, only logs TRUE when the element is in view):

FALSE
TRUE
FALSE

Local output (the incorrect output, only logs FALSE if you scroll pass the element, the rest of the time it logs TRUE):

TRUE
FALSE

I hope this helps.

Read more comments on GitHub >

github_iconTop Results From Across the Web

determine if element is in viewport - return true / false
I am writing a small script to determine if an element is in the viewport... The problem that I am having is my...
Read more >
@libshin/in-viewport - npm
In strict mode, the function inViewport returns true is the element is completely within the viewport. If a little part is off the...
Read more >
Check If an Element is Visible in the Viewport in JavaScript
If the element is in the viewport, the function returns true . Otherwise, it returns false . Checking if an element is visible...
Read more >
How to test if an element is in the viewport with vanilla ...
It returns an object with an element's height and width, as well as it's ... It returns true if it's in the viewport,...
Read more >
inView | jQuery plugin to detect when DOM elements are in ...
Other plugins. How it Works. inView returns true or false on call instead of binding to an event, why you may wonder…
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

@Metered not working on Spring MVC Controller

Next page

Can't build example scene in Unity 2019.4.14f1 + XCode12.1 + iOS. CoreLocation.framework errror?