Function true false return problem with .scroll event listener-CodePudding

This function detects whether the content enters the screen or not. I'm trying to return true or false depending on these conditions. but it returns undefined value. Since I will use this function in high order later, I need to output true or false.

function poser(x) {
        $(document).scroll(function(){
            let wHeight = $(window).height();
            let cHeight = $(x).outerHeight();
            let scroll = $(window).scrollTop();
            let contentPos = $(x).position();
            let contentTop = contentPos.top;
            let inScreen = (parseInt(scroll)   parseInt(wHeight)) /* - wHeight / 2 */ >= parseInt(contentTop);
            let outScreen = parseInt(contentTop)   parseInt(cHeight) <= scroll;
            if (inScreen && !outScreen) {
                return true
            }
            if (inScreen && outScreen) { 
                return false
            }
        })
    }

    console.log(poser(".sectionOne"))

body {
height:3000px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
test
</div>

CodePudding user response：

You should be able to get the element and then from there the code is pretty simple

var myElement = document.getElementById('my-element');

function elementInViewport() {

    var bounding = myElement.getBoundingClientRect();

    if (bounding.top >= 0 
        && bounding.left >= 0 
        && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) 
        && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {

        alert('Element is in the viewport!');
    } else {

        alert('Element is NOT in the viewport!');
    }
}

Then use a button and call the function elementInViewport()

<button onclick='elementInViewPort()'>Check If Element In View</button>

https://codepen.io/andreaswik/pen/dxVMvj

CodePudding user response：

I hope this will help you it doesn't return true or false but you can add a callback function that runs your code if the content is intersecting or not.

// This is your observer that checks if your element is in or out of your viewport
function poser(elem, myCallback) {
let observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
// this is where your callback function runs and receives the true or false
entry.isIntersecting ? myCallback(entry.isIntersecting): myCallback(entry.isIntersecting);
});
},
{
root: null,
rootMargin: "0% 0% 0% 0%",
threshold: 1,
}
);
observer.observe(elem);
}
// In this callback function you right the code you want to execute if the element is intersection or not
function myCallback(state) {
state ? console.log("i intersect") : console.log("now i don't");
}
poser(document.querySelector("Your selector"), myCallback);