如何自动滚动网页以平滑显示滚动效果



我有一个网页,它使用lax.js库为页面元素添加滚动效果。

有没有办法在页面顶部的按钮上添加自动滚动选项,使滚动以线性和缓慢的平滑运动开始(就像幻灯片放映一样(。

此外,如果用户尝试手动滚动,则自动滚动应停止。

注意:我不使用jquery。

这是一种javascript方式的

function start_scroll_down() { 
scroll = setInterval(function(){ window.scrollBy(0, 1000); console.log('start');}, 1500);
}
function stop_scroll_down() {
clearInterval(scroll);
console.log('stop');
}
<button onclick="start_scroll_down();">Start Scroll</button>
<button onclick="stop_scroll_down();">Stop Scroll</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis massa vitae metus imperdiet rutrum. Morbi vel est euismod, volutpat purus vel, mattis augue. Mauris sed mauris porttitor, pharetra turpis eu, sagittis neque. Maecenas et ex ac est gravida aliquam a et erat. Phasellus vitae lacinia lacus. Maecenas posuere ullamcorper iaculis. Nulla elementum rhoncus mauris, in efficitur enim pretium at.
Aliquam eu nibh sagittis, faucibus tellus sit amet, sollicitudin massa. Ut maximus quis lectus nec elementum. Maecenas vitae ipsum sed dolor blandit porta. Donec ultricies odio ut aliquet ultricies. Nulla lacinia, justo et placerat fringilla, dolor massa facilisis neque, eget varius sem sem vitae elit. Suspendisse laoreet ipsum ut libero imperdiet, ac rutrum nulla feugiat. Integer id neque facilisis, lacinia nulla ac, commodo erat. Nunc facilisis semper elit. Donec et ligula metus. Proin volutpat ante non mauris sagittis convallis. Ut commodo eu nulla vel rhoncus.
Nullam tempus volutpat orci, ac egestas nisi rutrum ut. Pellentesque lobortis sapien orci, ut vestibulum odio facilisis et. Duis vulputate, dolor eget tincidunt lacinia, orci tortor fringilla sem, vel commodo nulla lacus eu elit. Cras tristique, est quis porttitor tempor, orci ligula cursus mauris, eu accumsan dui enim vel ligula. Donec ac ante varius, pellentesque lorem ut, vulputate leo. Nam tempor, quam eget semper maximus, ante orci tempor eros, eu pulvinar purus erat a ex. Vestibulum sagittis eros sed diam vulputate sollicitudin. Donec luctus et eros non tincidunt. Integer porta dignissim augue.
Quisque et vehicula lectus. Suspendisse sit amet massa nec nisl volutpat sodales a nec leo. Duis fringilla urna magna. Praesent dapibus risus quis leo viverra, ut posuere ligula vulputate. Suspendisse magna nisi, bibendum eget imperdiet id, varius vel sapien. Pellentesque quis justo viverra, euismod nisl in, venenatis turpis. Vivamus dapibus bibendum ullamcorper. Vivamus non mi finibus, suscipit mi quis, molestie est. Nullam posuere quam vitae urna facilisis, at elementum neque consectetur. Etiam sollicitudin sem at felis tincidunt, eu rhoncus risus hendrerit. Nam lacus ex, hendrerit at pharetra ac, fermentum in velit. Donec aliquam massa vel enim convallis pellentesque. Maecenas facilisis, turpis eget pretium eleifend, tellus enim porttitor urna, sed lacinia ipsum dui sed mauris. Morbi pulvinar placerat lobortis. Nullam eget sollicitudin neque, non feugiat felis.
Aenean ut massa eu ex convallis dictum eget eget tortor. Duis leo metus, fringilla vitae nisl non, viverra feugiat mauris. Phasellus vel mattis justo. Quisque imperdiet condimentum enim eget feugiat. Etiam interdum arcu non lectus posuere posuere. Phasellus odio lectus, rutrum sed risus eu, viverra tempor risus. Aenean iaculis velit id mauris vulputate, non ultrices est lacinia. Integer sed lorem faucibus, porttitor nulla vitae, sagittis urna. Suspendisse metus sapien, interdum quis blandit sit amet, vestibulum tincidunt ante. Fusce ultricies pretium facilisis. Cras a lorem ut lorem pulvinar scelerisque vel sed tellus. Praesent id molestie neque. 
</p>

最新更新