当HTML元素的滚动条被滚动时执行脚本？-html教程-PHP中文网

当HTML元素的滚动条被滚动时执行脚本？

PHPz

发布： 2023-08-27 15:09:20

转载

1250人浏览过

当html元素的滚动条被滚动时执行脚本？

当元素滚动时，onscroll 属性会触发。您可以尝试运行以下代码来实现onscroll 属性 −

示例

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myid {
            width   : 250px;
            height  : 80px;
            border  : 2px solid blue;
            overflow: scroll;
         }
      </style>
   </head>
   <body>
      <p>Scroll the box.</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9292">
                            <img src="https://img.php.cn/upload/webcode/000/000/009/175858560544309.jpg" alt="触发式加载精美特效企业网站源码1.0.0">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9292">触发式加载精美特效企业网站源码1.0.0</a>
                            <p>触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="触发式加载精美特效企业网站源码1.0.0">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9292" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="触发式加载精美特效企业网站源码1.0.0">
                        </a>
                    </div>
                
      <div id = "myid" onscroll = "display()">This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.
      <br><br></div>
      <script>
         function display() {
            document.getElementById("myid").style.color = "blue";
         }
      </script>
   </body>
</html>

登录后复制

以上就是当HTML元素的滚动条被滚动时执行脚本？的详细内容，更多请关注php中文网其它相关文章！