Автоматическая прокрутка div вниз и обратно наверх

Question

У меня есть DIV, автоматически заполненный через PHP данными. Мне нужен небольшой скрипт, который прокручивается внутри заполненного DIV, если размер DIV исчезает из вида (или достигает максимального размера), а затем назад к началу, периодически. Я уже пробовал много плагинов, но никто не работает, как я ожидаю.

HTML, поясню выглядит следующим образом:

<div id="header"></div> 
<div id="wrapper"> 
    <div id="content"> 
     <div id="placeholder">!THIS IS FILLED UP!</div> 
    </div> 
</div> 

<style> 
    body { 
     background-color: #999999; 
     margin: 0 0 0 0; 
     overflow: hidden; 
    } 

    #wrapper { 
     margin: auto; 
     width: 1900px; 
    } 


    #header { 
     height: 100px; 
    } 

    #content { 
     width: 1900px; 
     min-height: 150px; 
     margin-top: 20px; 
    } 

    #placeholder { 
    } 
</style> 

Answer 1

Вы пытаетесь что-то вроде этого?

$(function() { 
 
    $("html, body").animate({ 
 
    scrollTop: $("body")[0].scrollHeight 
 
    }, 1000, function() { 
 
    $("html, body").animate({ 
 
    scrollTop: 0 
 
    }, 1000); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<div class="filler"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem asperiores placeat, ab earum nulla nemo, temporibus officiis facilis pariatur ea veritatis ratione in velit unde vel illo, ipsa voluptatibus tempore.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sapiente reiciendis, hic ducimus recusandae, expedita distinctio temporibus numquam modi, quia maxime laboriosam quibusdam explicabo amet aspernatur natus, repudiandae necessitatibus. Inventore.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A excepturi, reiciendis labore quis! Ipsa necessitatibus laudantium numquam debitis architecto enim fugiat iusto deserunt, dolorum asperiores pariatur, labore, dolores modi ad!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit corporis aut porro officiis optio? Corporis perspiciatis reprehenderit blanditiis eos. Reprehenderit repellat quaerat nihil nostrum, quidem earum dolore sed repudiandae deleniti!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, vitae aut molestias harum placeat obcaecati, distinctio vel debitis delectus vero quia unde tempore nisi possimus in modi expedita. Adipisci, repellendus.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet iste et ex est blanditiis assumenda natus dicta alias facere mollitia. Possimus natus iure, est alias consequatur enim dolorum eos cupiditate.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto iste quos, ipsam obcaecati, modi laboriosam dignissimos at incidunt vel unde ad cum. Consequatur, ut, dolorem. Minima officia atque similique aperiam!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur natus, dolor suscipit! Eius natus officia, est quos, blanditiis repellat iste in soluta ipsam! Soluta quas aspernatur itaque, in reiciendis tenetur.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum placeat possimus neque ipsa eaque blanditiis similique harum. Tempora rerum, eaque, eum nisi suscipit dolorem reiciendis, unde dignissimos porro consectetur beatae.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque odio deserunt a, repudiandae alias saepe. Non commodi dolorum maxime laborum. Pariatur possimus earum dolor quis aut tempora et eius ducimus.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quos fugiat doloribus doloremque magni voluptas quas voluptatum molestiae amet optio animi fugit vel, iste id esse ratione eum minima tenetur.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eaque non nobis, a voluptas facilis minus sunt vero tempora facere. Mollitia dignissimos nobis dolore dolorum, aliquam perspiciatis laborum architecto maiores.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis reiciendis, tenetur ex provident? Perspiciatis, deleniti, exercitationem? Ab nihil eligendi, ipsum, possimus blanditiis, fugit enim totam at reiciendis sequi recusandae.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius porro fuga, exercitationem dignissimos, illum, soluta nam hic enim, ad non. Voluptatibus reiciendis, quas nihil mollitia quae rem neque officiis.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste optio, architecto. Quis harum fugiat provident! Enim asperiores quam neque et recusandae, esse impedit dolores hic minima in. Explicabo, saepe, dolore.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed laudantium quod iure soluta quis nemo officiis neque, reprehenderit voluptas doloribus veniam veritatis omnis sapiente vero, eum, commodi tempore amet ipsa.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur id autem quaerat obcaecati et non, deserunt nisi aspernatur, sit quod suscipit voluptas possimus aperiam, nihil in minima reiciendis maiores ex.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, laudantium! Repellendus enim suscipit nobis veritatis accusantium minima possimus repellat ab omnis quia in voluptatum quas dolor, similique fugiat dignissimos numquam!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, aliquid dolor! Sequi ex quo laborum maiores quidem officiis, officia vel perferendis? Voluptate, ipsum magni. Repudiandae, deleniti officia architecto tempora nihil!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta fugit officia magnam nesciunt, voluptas eius velit veritatis alias ab iure, delectus repudiandae cum ipsum cumque rem eligendi ullam? Neque, quos.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga sit provident illum modi, quod aut distinctio accusamus facilis tenetur, natus vel temporibus officiis sed voluptatibus ratione tempore sint, totam dicta.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam saepe veritatis iure sint similique totam eaque doloremque laboriosam reiciendis eos quae modi atque, quibusdam quos officiis, temporibus sed pariatur repellat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam delectus, iste molestias vitae. Fugit doloribus accusantium expedita, sunt fuga, rerum impedit et enim accusamus dicta provident corporis. Ex, quis, alias.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam eos dicta totam at fugiat hic eum itaque minima, est dolorem et voluptatum nesciunt ipsa perspiciatis inventore enim ratione animi!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sequi obcaecati quia deleniti libero veniam, voluptatum itaque totam voluptatem nostrum sapiente, doloribus tenetur ipsa. Animi et quam laudantium. Quae, laborum!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia consectetur quam voluptate possimus saepe sequi deleniti doloribus iusto! A modi, rerum ipsa similique facere quasi repudiandae quia, molestiae soluta veniam.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates vitae at eum distinctio id animi, aliquid ipsam perferendis dolor, vero rem provident unde beatae temporibus quidem dolorem necessitatibus itaque facilis.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum illum saepe fugiat dolore. Ad quo maiores a nam vitae vel minus facere quis harum quod, eligendi repellendus, cum repellat optio.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quibusdam consequatur numquam eveniet voluptates quae libero eaque perspiciatis cum dolor maxime, modi veritatis et quia reprehenderit, praesentium illum pariatur! Deleniti.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem atque fuga nisi dolores mollitia veritatis porro perferendis officia perspiciatis fugiat eos at incidunt, nam harum, quis, alias dolor minima sunt!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur cum in eveniet aut iure dignissimos ex accusamus perferendis, culpa, velit quisquam, inventore a. Voluptatum, at quibusdam, nesciunt iure voluptates tempora.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum hic incidunt nam, provident odit sed animi aperiam, dicta ex assumenda fugiat corrupti obcaecati iure eligendi maiores voluptas enim, quaerat. Cupiditate?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate modi, sit nihil fugiat, harum molestias dolore ipsum vitae dicta voluptatibus inventore atque voluptatem. Non voluptatem corrupti, blanditiis repellat omnis voluptates!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo modi provident porro quibusdam voluptatibus quis molestiae aspernatur fugit unde quisquam architecto sapiente tenetur reprehenderit repellat esse nesciunt cumque, iure excepturi?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aliquid perspiciatis possimus distinctio, minus eaque fuga, voluptates cumque, molestiae odio sequi. Iste, quia dolorum soluta adipisci voluptatem animi, a odit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et explicabo deleniti alias possimus, at voluptatum porro veniam placeat voluptatem maiores facilis molestias a debitis tempore. Odit nemo, ea labore fugit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi expedita, enim doloribus inventore odio. Fugiat rerum animi eius rem sit, culpa laboriosam nisi voluptas sequi incidunt blanditiis nesciunt quasi ad?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, esse beatae. Non placeat veniam, enim nemo doloremque necessitatibus sed, quaerat unde, facilis temporibus eveniet deserunt alias dicta ea officiis expedita.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nemo molestiae vero pariatur harum, quisquam expedita modi! Placeat corrupti, dolorem, tempore mollitia facere, tempora veniam expedita dolores sed consectetur voluptas.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis optio dolorum minima dolor, sunt, suscipit id dicta, labore repudiandae nobis itaque inventore possimus architecto, qui sed vel temporibus quibusdam placeat.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In explicabo, nobis natus necessitatibus autem voluptatibus sint voluptas, iste ducimus porro alias dicta quod aperiam vitae! Laborum maiores accusantium ipsam voluptatibus.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cum aspernatur aliquid sint, impedit rem et quas? Expedita voluptatibus laudantium recusandae facilis quaerat possimus quas tenetur repellat eum non!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi possimus maxime ab maiores illo, sed porro itaque odio facere aspernatur corporis saepe, et cum dicta a. Omnis pariatur perferendis reprehenderit.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste saepe rem repellat esse aperiam doloribus ad, aspernatur! Iste dolor consectetur, voluptates quas tenetur esse officiis eum, possimus debitis blanditiis maiores?</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iste, consectetur ab architecto ipsam deleniti consequuntur in, laudantium eaque quaerat, aut suscipit numquam perferendis nesciunt sit aperiam odit obcaecati saepe!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id corporis facilis, recusandae doloremque! Voluptas dolor eos, labore quaerat atque sit officia voluptates magni dolorem enim ab, vero obcaecati libero, quidem.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores expedita ducimus explicabo libero tempora dolore recusandae. Maxime facere aliquid laudantium, consequuntur, animi voluptatem ipsam qui sunt illo, repellat architecto sapiente.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illo, ex placeat asperiores est natus. Maiores quas, eligendi ipsa repellat hic sed illo explicabo, voluptatum harum sit omnis veniam mollitia.</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea ipsum similique sed non, temporibus, nulla ipsam omnis ratione! Ullam culpa itaque, voluptatum quibusdam doloribus commodi quidem molestias nemo enim!</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus consequatur commodi vel accusantium, iure ipsum. Eligendi eos, animi, nam, iste voluptatum adipisci excepturi beatae culpa itaque eveniet vitae libero ducimus.</p> 
 
</div>

Answer 2

С простой Vanilla JS вы можете попробовать что-то вроде этого

var example = document.getElementsByClassName("example")[0], 
 
    content = example.getElementsByClassName("content")[0]; 
 

 
function scrollDown(scrollSpeed, endPause, restartPause) { 
 
    setTimeout(function() { 
 
    if (example.scrollTop === content.offsetHeight - example.offsetHeight) { 
 
     setTimeout(function() { 
 
     example.scrollTop = 0; 
 
     setTimeout(function() { 
 
      scrollDown(scrollSpeed, endPause, restartPause); 
 
     }, restartPause || 0); 
 
     }, endPause || 0); 
 
    } else { 
 
     example.scrollTop += 1; 
 
     scrollDown(scrollSpeed, endPause, restartPause); 
 
    } 
 
    }, scrollSpeed); 
 
}; 
 

 
setTimeout(function() { 
 
    scrollDown(10, 1000, 1000); 
 
}, 1000); // Initial delay

.example { 
 
    height: 100px; 
 
    background-color: #f00; 
 
    overflow-y: scroll; 
 
} 
 
.content { 
 
    padding: 0.1px; 
 
}

<div class="example"> 
 
    <div class="content"> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
 
    </div> 
 
</div>

Here a codepen example

Кроме того, чтобы пользователь мог легко прокручивать, вы можете создать условие в scrollDown, которое проверяет, находится ли класс .is-hovered в элементе .content и не меняет значение scrollTop в этом случае.

После, просто добавьте .is-hovered класс, когда mouseenter события инициируется и удалить .is-hovered когда mouseleave срабатывают от .content