html＆＃x2B; JavaScript卷轴检测不起作用

发布于 2025-02-04 08:50:58 字数 1824 浏览 0 评论 0原文

我似乎无法让滚动事件用于此布局。我被困，我想知道你们是否可以帮助我。我要做的是检测何时滚动的内容=“ mycontent”的内容div是在滚动。我在做什么错？

提前致谢。

<!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>

任何帮助都将受到赞赏。提前

感谢

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤城病女 2025-02-11 08:50:58

问题在于，当前垂直滚动条没有出现在div上，该具有onScroll侦听器定义但在其父母上。为了查看该div上的滚动条，您必须与Overflow-y：auto一起明确定义其高度。还要确保在父div上定义溢出：隐藏。

请查看您的修订代码，看看它是如何工作的。

<!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>

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>

回复收藏 0 原文

~没有更多了~