Incompatibility between Jquery 2 div [hide-show] - javascript

My second <div> is shown when page is refreshed and I want to avoid this.
$(function(){
$("#div2").hide();
$("button").click(function(){
$("#div1").hide()
$("#div2").fadeIn(1000)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
<button id="button">Click</button>
</div>
<div id="div2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>


Instead of hiding div2 by hide() function use css for it.
#div2 { display:none; }
and change your script code missing ; in code
<script>
$(function(){
$("button").click(function(){
$("#div1").hide();
$("#div2").fadeIn(1000);
});
});
</script>


<!doctype html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function()
{
$("#div2").hide();
$("button").click(function(){
$("#div1").hide()
$("#div2").fadeIn(1000)
});
});
</script>
</head>
<div id="div1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
<button id="button">Click</button>
</div>
<div id="div2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>
</html>


you only need jquery to run your code
$(document).ready(function() {
$("#div2").hide();
$("#button").click(function(){
$("#div1").hide();
$("#div2").fadeIn(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>
<button id="button">Click</button>
<div id="div2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>

Related

Click in an html tag and display another that is initially hidden

Each <p> are hidden on initial load and I want to click on the <h3> then want the p-tag to show using Javascript.
I have a section in my HTML that looks as follow
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>
My question is how do you reference the following div (or in this case p-tag) given the H3 you pressed?
If you press the H3 under #history then only that p-tag must show and the same with the other divs. But how do you do this in Javascript without duplicating code with different id's or classes.

My approach avoid the use of inline JS inside HTML, which is a bad practice.
Select all <h3> that are clickable and should open the <p> tags, then add the listener to them all.
Now, all you need is the function using this, that refers to the clicked h3, get it's sibling element, check if it is displaying or not, and do the toggle.
See below code
openFunction = function(ev) {
let pTagElem = this.nextElementSibling
if (pTagElem.style.display == "inline") {
pTagElem.style.display = "none"
} else {
pTagElem.style.display = "inline"
}
}
//select all <h3> that should be clickable (inside bio-sections divs)
let h3s = document.querySelectorAll("#bio-sections div h3")
//add the listener to them all
for (let h3 of h3s) {
h3.onclick = openFunction
}
#bio-sections div p {
display: none
}
#bio-sections div h3 {
cursor: pointer
}
<div id="bio-sections">
<div id="history">
<h3>My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>

you can use javascript parameters like this, and move the id into the p tag
<div>
<h3 onclick="openFunction('history')">My History</h3>
<p id="history">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<script>
function openFunction(id) {
document.getElementById(id).show()
}
</script>

You can use closest() and delegation.
const container = document.querySelector("#bio-sections");
container.addEventListener("click", function (event) {
const parentSectionDiv = event.target.closest(".section");
if (parentSectionDiv !== null) {
parentSectionDiv.querySelector("p").classList.remove("hidden");
}
});
.hidden {
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="style.css" /> -->
<title>Sign in & Sign up Form</title>
</head>
<body>
<div id="bio-sections">
<div id="history" class="section">
<h3>My History</h3>
<p class="hidden">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias
hic officia dolor quidem maiores quasi architecto veritatis obcaecati
debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum
quae!
</p>
</div>
<div id="schooling" class="section">
<h3>My Schooling</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure
distinctio voluptatum non quia maxime numquam amet eum at, quo ut
iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.
</p>
</div>
<div id="work" class="section">
<h3>My Work experience</h3>
<p class="hidden">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam
dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore
porro natus voluptates nam, consectetur corporis vitae eius hic sed ea
earum.
</p>
</div>
<div id="hobbies" class="section">
<h3>My Hobbies</h3>
<p class="hidden">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor
perspiciatis ipsam suscipit voluptas ab distinctio a doloribus,
dolorem officia iure nemo qui incidunt soluta dolores ratione saepe.
In, mollitia! Voluptatem!
</p>
</div>
</div>
</body>
<script src="script.js"></script>
</html>

It depends a bit on how stable your HTML is, but if you are confident it remains like that you don't need to change it and can on the click get the p element.
There's several ways of doing this. This snippet gets the common parent and the first p element in it.
function openFunction() {
console.log(event.target);
console.log(event.target.parentElement.querySelector('p:first-of-type'));
}
<div id="bio-sections">
<div id="history">
<h3 onclick="openFunction()">My History</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga alias hic officia dolor quidem maiores quasi architecto veritatis obcaecati debitis, rem suscipit quo blanditiis perspiciatis deleniti id a rerum quae!</p>
</div>
<div id="schooling">
<h3>My Schooling</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In iure distinctio voluptatum non quia maxime numquam amet eum at, quo ut iusto est quos hic placeat. Repudiandae dolorem cupiditate illo.</p>
</div>
<div id="work">
<h3>My Work experience</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quisquam dolor nemo nostrum consequuntur. Tempora, quia nobis eligendi, labore porro natus voluptates nam, consectetur corporis vitae eius hic sed ea earum.</p>
</div>
<div id="hobbies">
<h3>My Hobbies</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor perspiciatis ipsam suscipit voluptas ab distinctio a doloribus, dolorem officia iure nemo qui incidunt soluta dolores ratione saepe. In, mollitia! Voluptatem!</p>
</div>
</div>

Make absolutely positioned button same width as its content

I have floating buttons that I want to be exactly as wide as their content. The content may be several lines long.
I have tried a lot of things, but nothing seems to work. Any ideas how to achieve this?
$('button').css('width', $('button span').outerWidth() + 'px')
$.each($('button'), (i, v) => {
$(v).css('width', $(v).find('span').outerWidth() + 'px');
$(v).css('top', i*100 + 'px');
});
section {
position: relative;
width: 300px;
}
button {
position: absolute;
padding: 0;
text-align: left;
}
span { background: lightcoral; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis iure nostrum dicta cumque. Nisi facilis corporis hic, pariatur molestiae error distinctio architecto quas itaque deserunt aliquam quo molestias dolor ex!</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet.</span>
</button>
<button>
<span>Lorem.</span>
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
</section>

you need to consider the border so add box-sizing: content-box; and also 1px to the final width (I am finding why ...)
$.each($('button'), (i, v) => {
$(v).css('width', ($(v).find('span').outerWidth() + 1) + 'px');
$(v).css('top', i * 100 + 'px');
});
section {
position: relative;
width: 300px;
}
button {
position: absolute;
box-sizing: content-box;
padding: 0;
text-align: left;
}
span {
background: lightcoral;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis iure nostrum dicta cumque. Nisi facilis corporis hic, pariatur molestiae error distinctio architecto quas itaque deserunt aliquam quo molestias dolor ex!</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
</button>
<button>
<span>Lorem ipsum dolor sit amet.</span>
</button>
<button>
<span>Lorem.</span>
</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, provident laborum itaque ratione nisi enim delectus dolorem dicta quod, quam vitae odit officiis. Ratione pariatur eos sapiente ut expedita. Incidunt?</p>
</section>

Sidebar layout where only the content div is scrollable

I would like to have a sidebar layout like the one in the picture:
The height of the sidebar is 100%; The Menu 1, Menu 2.. header and the div container below (the one with numbers) should also stay visible.
The only appearing scroll should be in the content div and only if the content is long enough.
What i have so far: https://codepen.io/anon/pen/oadQQE
HTML:
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside{
height: 100%;
}
.header {
background: yellow;
font-size: 24px;
overflow: hidden;
}
.header ul {
list-style-type: none;
display: flex;
justify-content: space-between;
}
.header ul li{
border: 1px solid red;
}
.fixed{
border: 1px solid blue;
font-size: 24px;
}
.content{
border: 1px solid red;
height: 100%;
overflow: auto;
}
<div class-"aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>
Edit: leaving this for future reference from W3Schools:
Note: The overflow property only works for block elements with a specified height.

You can do this by setting display: flex on the sidebar itself with a flex-direction: column;.
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background: yellow;
font-size: 24px;
}
.header ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.header ul li {
border: 1px solid red;
}
.fixed {
border: 1px solid blue;
font-size: 24px;
}
.content {
border: 1px solid red;
overflow: auto;
}
<div class="aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>

Automatic scroll To element on a list when open this

) ,
I explain my little problem ( sorry for my english):
I have a list of element (div) in left ( constraint in size) with a scrollbar (auto)
(a custom scroll but it's the same problem with the basic scroll).
All of this "element" can be open (with a "+" button) that open a "sub element" IN the list.
Problem , by example if you open the last element you can't see the sub element without scroll to this sub element, i would like add a js for scrolling to this open sub-element"
I explain with image what i would like have: http://www.nanosix.be/test/help.jpg
and i make a simply version on jsfiddle here :
https://jsfiddle.net/9Lrhfqmk/
<body>
<div class="menu">
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
</div>
<script>
$(".button").click(function() {
$(this).parent(".ele").children(".other").toggleClass("displayblock");
});
</script>
</body>

Here is the updated fiddle: https://jsfiddle.net/9Lrhfqmk/2/
You have to do something like this:
$( ".button" ).click(function() {
var parent = $(this).parent(".ele");
var other = parent.children(".other");
other.toggleClass("displayblock");
if(other.hasClass("displayblock")){
$(".menu").scrollTop(other.offset().top);
}
else{
$(".menu").scrollTop(parent.offset().top);
}
});

Automatic scroll a div down and back to top [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've got a DIV, automaticly filled via PHP with Data. I need a small script that scrolls down inside the filled DIV if the DIV-size goes out of view (or reaches a maximum size) and then back to top, periodicly. I've already tried a lot of Plugins bot no one works like i expect.
The HTML basicly looks like this:
<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>

Are you trying something like this?
$(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>

With plain Vanilla JS you could try something like this
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
In addition, in order to allow user to scroll easily, you could create a condition into the scrollDown that check if the class .is-hovered is on the .content item and not change the scrollTop value in this case.
After, just add .is-hovered class when mouseenter event is triggered and remove .is-hovered when mouseleave is triggered from .content

Categories