仅当在特定div的视图上滚动时才激活CSS动画

注意:视口代码中的元素是此链接的引用如何判断DOM元素在当前视口中是否可见? I have a chart made in CSS and HTML, in this chart there is an animation for the chart loading. I want to start this animation only when I scroll on the view of the div that contain the chart.I want to charge the chart only when I'm on it on the page, I know that I have to use javascript but I'm a very beginner in JS so I don't know if it is possible to do something like that.This is the fiddle of the chart:https://jsfiddle.net/matteous1/pdL0kbqk/HTML<ul class="chart"> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li></ul>CSS.chart { display: table; table-layout: fixed; width: 90%; /*max-width: 700px;*/ height: 65%; margin: 0 auto; background-image: linear-gradient(to top, rgba(0, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%); background-size: 100% 50px; background-position: left top;}.chart li { position: relative; display: table-cell; vertical-align: bottom; height: 200px;}.chart span { margin: 0 1em; display: block; /*background: rgba(209, 236, 250, 0.75);*/ animation: draw 1s ease-in-out;}.chart span:before { position: absolute; left: 0; right: 0; top: 100%; padding: 5px 1em 0; display: block; text-align: center; content: attr(title); word-wrap: break-word;}@keyframes draw { 0% { height: 0; }} 解决方案 You can use onscroll event and check if the element is in viewport document.addEventListener('DOMContentLoaded', function() { var charElem = document.querySelector('.chart'); var isVisible = false; window.onscroll = function() { if(isElementInViewport(charElem) && !isVisible) { charElem.className += " anim"; isVisible = true; } } function isElementInViewport (el) { //special bonus for those using jQuery if (typeof jQuery === "function" && el instanceof jQuery) { el = el[0]; } var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ ); } });https://jsfiddle.net/karthick6891/pdL0kbqk/1/Note: element in viewport code is reference from this link How to tell if a DOM element is visible in the current viewport? 这篇关于仅当在特定div的视图上滚动时才激活CSS动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！