That's what happened:. . . .

I made a web page. The lower part of the web page needs to wait 3 seconds to automatically move up after loading, so I used Jquery's animate method:

$("#part2" ).animate({marginTop: "-=800px"}, 8000);

Range, after using this method, it turned out that the mouse wheel could not remove it.

So, I used a piece of js code to monitor the wheel movement. If there is a wheel movement, modify the margintop property so that the part2 layer can slide up and down following the wheel. .

Finally, I found that the function was implemented, but the margin-top attribute of part2 can be increased infinitely, causing part2 to sometimes go down to infinite distance. At this time, I was confused.

$(document).on('mousewheel DOMMouseScroll', onMouseScroll); function onMouseScroll(e) { e.preventDefault(); var wheel = e.originalEvent.wheelDelta || -e.originalEvent.detail; var delta = Math.max(-1, Math.min(1, wheel)); var part2= document.getElementById('part2'); if (delta < 0) {//Scroll down console.log(' Scroll down'); part2.style.marginTop =( parseInt(part2.style.marginTop) - delta*20) "px"; .marginTop =( parseInt(part2.style.marginTop) delta*20 ) "px"; } } }

How can I solve this problem? I know you all understand, I’m a noob! Thank you!