javascript自動滾動兩種方式
[英]javascript autoscroll both ways
問題描述
我正在嘗試設置一個巨大的頁面，該頁面將緩慢向下滾動到頁面末尾，然后返回頁面頂部，依此類推……無休止。 我使用的功能scrollBy（）和setTimeOut（）可以很好地完成工作，但是我只能管理一個循環，該循環會下降然后停止！ 您能幫我添加代碼嗎，並不斷地向下->向上->向下->向上-> ...滾動嗎？
這是腳本定義：
<script language="JavaScript">
function scrollAuto()
{
window.scrollBy(0,1)
setTimeout('scrollAuto()',1);
}
if (document.layers || document.all)
{
scrollAuto()
}
</script>
這就是我的稱呼->
<body onLoad="scrollAuto();">
謝謝你的幫助。
1 個解決方案
解決方案1
1 2015-01-31 01:19:18
這就是我想出的。 由於該代碼段，HTML受到了一些限制，因此您可以對其進行修改以附加到正文，文檔或窗口，並根據需要使用“ scrollBy”方法。
請記住添加“ resize”事件，以便在調整窗口大小時調整滾動限制，否則可能會遇到問題。
希望這可以幫助。
var scrollInfo = { speed: 2, timeout: 15 }; function initScroll() { //attachScroll(document.getElementById("scrolling-content")); attachScroll(); } function attachScroll(el) { if (el && el.scrollHeight) { scrollInfo.element = el; scrollInfo.max = el.scrollHeight - el.clientHeight; } else { var h = window.innerHeight || document.documentElement.clientHeight; scrollInfo.element = window; scrollInfo.max = document.documentElement.offsetHeight - h; } } function doScroll() { if (scrollInfo.element) { if (scrollInfo.element.scrollTop !== undefined) { var st = scrollInfo.element.scrollTop - scrollInfo.speed; if (st > 0 && st < scrollInfo.max) { scrollInfo.element.scrollTop = st; } else { scrollInfo.speed *= -1; } } else if (scrollInfo.element.scrollBy) { var st; if (scrollInfo.element.pageYOffset !== undefined) { st = scrollInfo.element.pageYOffset; } else if (scrollInfo.element.scrollY !== undefined) { st = scrollInfo.element.scrollY; } else { st = document.documentElement.scrollTop; } st += scrollInfo.speed; if (st > 0 && st < scrollInfo.max) { scrollInfo.element.scrollBy(0, scrollInfo.speed); } else { scrollInfo.speed *= -1; } } } }; function stopScroll() { window.clearInterval(scrollInfo.interval); } window.addEventListener("load", initScroll, false); window.addEventListener("resize", initScroll, false); scrollInfo.interval = window.setInterval(doScroll, scrollInfo.timeout);
<div id="scrolling-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. <b>Vestibulum lacinia arcu eget nulla</b>. Proin ut ligula vel nunc egestas porttitor. <b>Curabitur tortor</b>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.</p> <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. <i>Curabitur tortor</i>. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.</p> <p>Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. <i>Mauris ipsum</i>. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim.</p> <p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. <i>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</i>. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.</p> <p>Sed pretium blandit orci. <i>Sed non quam</i>. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. <i>Integer lacinia sollicitudin massa</i>. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. <b>Aenean lectus elit, fermentum non, convallis id, sagittis at, neque</b>. Sed cursus ante dapibus diam.</p> <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam.</p> <p>In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. <i>Mauris massa</i>. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.</p> <p>Ut fringilla. <i>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</i>. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. <i>Fusce ac turpis quis ligula lacinia aliquet</i>. Etiam ultrices. <b>Nulla facilisi</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.</p> <p>Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. <i>Mauris ipsum</i>. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante.</p> </div>
編輯：更新為接受元素，如果未提供，則退回到窗口。
注意：如果必須與舊版本的IE瀏覽器兼容，則可能需要找到其他方法來計算窗口的innerHeight和窗口的滾動位置。
雙向自動滾動div內容
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.