html + javascript scroll detection not working

I cannot seem to get scroll event to work for this layout. I am stuck and I was wondering if you guys can help me out. What I am trying to do is to detect when the content div, which has id="myContent", is scrolling. What am I doing wrong?

Thanks in advance.

<!DOCTYPE html>
<html>
<head>

<script>    

    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        console.log("scrollFunction");
    }
    
    console.log(document.getElementById("myContent")); //dont know why it cannot find this arrrgghhh !!!

</script>
    
</head>
<body style="width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;">

    <!--container-->
    <div style="border: 1px solid red;
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: auto;
        overflow-x: hidden;">
            
        <!--header-->       
        <div style="border: 1px solid green;
            width: 100%;
            height: 75px;
            top: 0;
            position: sticky;
            margin: 0 auto;
            align-items: center;"> 
        </div>
        
        <!--content-->
        <div id="myContent" 
            onscroll="scrollFunction();"            
            style="border: 1px solid blue; 
                width: 100%;
                height: auto;
                margin: 0 auto;">   
                
            <!--content 1-->                    
            <div style="width: 100%; height: 1000px;">
            
            </div>          
        </div>
        
        <!--footer-->
        <div style="border: 1px solid pink;     
            width: 100%;
            height: 150px;
            margin: 0 auto;">   
        </div>          
    </div>  
</body>

Any help is appreciated. Thanks in advance

Best regards

Solution

The problem is that currently the vertical scrollbar does not appear on the div that has the onscroll listener defined but on its parent. In order to see the scrollbar on that div, you must explicitly define its height together with overflow-y: auto. Make sure also to define overflow: hidden on the parent div.

Please take a look at your amended code and see how it works.

<!DOCTYPE html>
<html>
<head>

<script>    

    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        console.log("scrollFunction");
    }
    
    console.log(document.getElementById("myContent")); //dont know why it cannot find this arrrgghhh !!!

</script>
    
</head>
<body style="width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;">

    <!--container-->
    <div style="border: 1px solid red;
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: hidden;">
            
        <!--header-->       
        <div style="border: 1px solid green;
            width: 100%;
            height: 75px;
            top: 0;
            position: sticky;
            margin: 0 auto;
            align-items: center;"> 
        </div>
        
        <!--content-->
        <div id="myContent" 
            onscroll="scrollFunction();"            
            style="border: 1px solid blue; 
                background-color: gray;
                width: 100%;
                height: 500px;
                overflow-y: auto;
                margin: 0 auto;">   
                
            <!--content 1-->                    
            <div style="width: 100%; height: 1000px;">
            
            </div>          
        </div>
        
        <!--footer-->
        <div style="border: 1px solid pink;     
            width: 100%;
            height: 150px;
            margin: 0 auto;">   
        </div>          
    </div>  
</body>