如何在mousedown事件上连续滚动div？

我有两个div和两个按钮：

如何连续滚动’#items’直到用户释放按钮？ 我尝试使用jquery mousedown事件和动画function，但无法使其工作。

 $("#up").mousedown(function(){ $("#items").animate({"top": "+=10px"}, "fast"); }) 

上面的代码只移动div一次。 我希望在释放按钮之前实现连续动画。 谢谢你的帮助！

Answer 1

请试试这个：

 var scrolling = false; jQuery(function($){ $("#up").mousedown(function(){ scrolling = true; startScrolling($("#items"), "-=10px"); }).mouseup(function(){ scrolling = false; }); }); function startScrolling(obj, param) { obj.animate({"top": param}, "fast", function(){ if (scrolling) { startScrolling(obj, param); } }); } 

Answer 2

我改进了@ jesse-dupuy的小提琴。 我已经将“线性”缓动添加到动画中，因此滚动是平滑的，并将.on（’mouseup’）事件从按钮移动到文档，因此用户释放鼠标按钮的位置无关紧要。

 $(function () { // use UI arrows in page content to control scrolling var scrolling = false; $('.scroll-arrows').on('mousedown', 'div', function (evt) { scrolling = true; startScrolling($('.scroll-box'), 100, evt.target.id); }); $(document).mouseup(function () { scrolling = false; }); function startScrolling(obj, spd, btn) { var travel = (btn.indexOf('up') > -1) ? '-=' + spd + 'px' : '+=' + spd + 'px'; if (!scrolling) { obj.stop(); } else { // recursively call startScrolling while mouse is pressed obj.animate({ "scrollTop": travel }, "fast", "linear", function () { startScrolling(obj, spd, btn); }); } } }); 

 .scroll-box { max-height: 300px; overflow-y: scroll; border: 2px solid #000; margin-bottom: 20px; } .scroll-box .overflow { height: 1000px; background: #d0e4f7; background: url(data:image/svg+xml; base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI0JSIgc3RvcC1jb2xvcj0iIzczYjFlNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzBhNzdkNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc5JSIgc3RvcC1jb2xvcj0iIzUzOWZlMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4N2JjZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d0e4f7), color-stop(24%, #73b1e7), color-stop(50%, #0a77d5), color-stop(79%, #539fe1), color-stop(100%, #87bcea)); background: -webkit-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); background: -o-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); background: -ms-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); background: linear-gradient(to bottom, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0e4f7', endColorstr='#87bcea', GradientType=0); } .scroll-arrows { text-align: center; } .scroll-arrows div { display: inline-block; width: 40%; padding: 20px; cursor: pointer; color: #fff; background: #00f; } 

  
 
Tons of content in here...
 
 
 
Scroll Up
 
Scroll Down