What is the proper order for adding transitions in js? - javascript

Struggling to add css opacity transition with js. When clicking on a tab, the js loop hides all content and only shows the content with the corresponding id. Im trying to get the loop to add the transition as well. The tabcontent class is the CSS in question.
<li>
<a style="left: 9.6%" href="javascript:switchTab('tb_1', 'content_1', 'icon_1');" id="tb_1" class="tabmenu active">FIT GUIDE<span class='mobileshow' id='icon_1'>-<span></a>
<section id="content_1" class="tabcontent">
<p class='lorem'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui</p>
</section>
</li>
<li>
<a style="left: 39%;" href="javascript:switchTab('tb_2', 'content_2', 'icon_2');" id="tb_2" class="tabmenu">CARE <span class='mobileshow' id='icon_2'>+</span></a>
<section id="content_2" class="tabcontent" style="display:none; opacity: 0;">
<p class='lorem'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui</p>
</section>
</li>
<li>
<a style="left: 60.6%" href="javascript:switchTab('tb_3', 'content_3', 'icon_3');" id="tb_3" class="tabmenu">MATERIALS <span class='mobileshow' id='icon_3'>+</span></a>
<section id="content_3" class="tabcontent" style="display:none; opacity: 0;">
<div class='materials-content'>
<ul class='materials-stats'>
<li class='material-item'>50%<span class='subtext'>cashmere</span></li>
<li class='material-item'>46%<span class='subtext right'>wool</span></li>
<li class='material-item'>4%<span class='subtext'>modal</span></li>
</ul>
<div class='border-bot'></div>
<p class='lorem'>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui</p>
</div>
</section>
</li>
</ul>
function switchTab(tab_id, tab_content, icon_id) {
// select tab content
let content = document.getElementsByClassName("tabcontent");
for (let i = 0; i < content.length; i++) {
// hide tab content
content[i].style.opacity = '0';
content[i].style.display = 'none';
}
//document.getElementById(tab_content).style.display = 'block';
//document.getElementById(tab_content).classList.add("showme");
document.getElementById(tab_content).style.cssText = "opacity: 1; display: block;"
}
.tabcontent {
max-width: 750px;
margin-top: 45px;
position: relative;
transition: opacity 1s ease-in-out;
padding: 20px 0;
top: 0;
}

It is not possible to animate opacity and display at the same time. You would probably want to set display: block first, and then change the opacity. Or the other way around if you want to hide the block.
I think you might want to have a look at #keyframes. Here's a link to documentation about it. https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
It will look something like this:
#keyframes yourAnimation {
from {
transform: opacity(0);
}
to {
transform: opacity(1);
}
}
Have a class named animation and apply the keyframes to that. Then add the class to the HTMLElement you want to be animated using JS. This will cause the CSS animation to occur.
CSS for this part will be looking something like this:
.animation {
animation: yourAnimation;
}
It seems like the JS part you can manage, but if you need more help let me know!

Related

Can't hide a div created by javascript

I got a simple html page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script type="text/javascript" src="https://externalsite.com/script.js" async=true>
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</p>
</body>
</html>
A js file (hosted on an external site) modify the code in this way.
It displays a div in the center of the page with two buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST</title>
<script type="text/javascript" src="https://externalsite.com/script.js" async=true>
</script>
</head>
<body>
<div class="qc-cmp-ui-container qc-cmp-showing">
<div class="qc-cmp-ui qc-cmp-showing" id="qcCmpUi">
<img class="qc-cmp-publisher-logo" src="http://www.xxx.it/logo.png" onerror="window.__cmpui("hideLogo",event)">
<div class="qc-cmp-ui-content">
<h1 class="qc-cmp-title"> title </h1>
<span>
<p class="qc-cmp-main-messaging"> bla bla bla. </p>
<span>
<div class="qc-cmp-buttons qc-cmp-primary-buttons" id="qcCmpButtons"><button class="qc-cmp-button qc-cmp-secondary-button">Non Accetto</button> <button class="qc-cmp-button" onclick="window.__cmpui("setAndSaveAllConsent",!0)"> Accetto </button> </div>
</span>
</span>
</div>
<div class="qc-cmp-alt-buttons"> <a id="qc-cmp-purpose-button" class="qc-cmp-alt-action qc-cmp-center-bottom" onclick="window.__cmpui("updateConsentUi",2)"> Mostra tutte le finalità di utilizzo </a> </div>
</div>
</div>
</body>
</html>
My goal is to hide the div with qc-cmp-ui-container class
I tried adding jQuery
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM completamente caricato e analizzato");
$('.qc-cmp-ui-container').hide();
});
But the div is always visible.
How can I hide it?
You are trying to hide the div before he's actually created. DOMContentLoaded event fires when the DOM is loaded, but not when the DOMContent is changed.
Try to wait the div to be created and after that hide it.
var interval = setInterval(function(){
if($('.qc-cmp-ui-container').length) {
$('.qc-cmp-ui-container').hide();
clearInterval(interval);
}
}, 150);

Changing navbar color depending on its position. Color not changing

I'm trying to change the color of my navbar depending on its position in the html doc. It changes to black at first, but it doesn't change again. Am I even calculating the position correctly? Here is the code.
$(function () {
console.log('Running from the navBar.js')
var scrollStart = 0;
var $navStartChange = $('nav');
var $navChild = $('.navigation-flex');
var offset = $navStartChange.offset();
var $portfolioPos = $('section#portfolio').position();
var $openSourcePos = $('section#openSource').position();
$(document).scroll(function () {
scrollStart = $(this).scrollTop();
console.log('This is the position of the porfolio section: ' + $portfolioPos.top);
console.log('This is the position of offset: ' + offset.top);
if ( scrollStart >= $portfolioPos.top ) {
console.log('Arrived at the top of the portfolio section');
$navStartChange.css('position', 'fixed');
$navChild.css('background-color', '#2c3e50');
} else if ( scrollStart >= $openSourcePos.top ) {
console.log('Arrived at the top of the openSource section');
$navChild.css('background-color', 'green');
}
}) /* End of scroll function */
})
main.haml
%nav
%ul.navigation-flex
%li
%a.logo{href:"index.html"} Home
%li
%a{href: "#about"} About
%li
%a{href: "#portfolio"} Work
%li
%a{href: "#labs"} Labs
%li
%a{href: "#contact"} Contact
%section#portfolio
%article.article--fritmark
.article--fritmark__img-container
.window--outer.isHidden
%span.btns
%span.browser-red
%span.browser-yellow
%span.browser-green
%span.newTab
%img.article--fritmark__img{src: "/img/screenshoots/favs.png", alt: "favs" }/
%section#openSource
%h1.section-subheading Open Source Contributions
%h1.section-subheading Github Chart
First of all, instead of attaching to the scroll event (which gets called a ridiculously enormous number of times in a very short timespan), attach to an interval (in my example below, the interval is every 5 milliseconds).
getBoundingClientRect().top is a good way to get the y position of an element in your page. jQuery has shortcuts I'm sure, but I just went for a vanilla JS solution here.
document.body.scrollTop is a good way to get the scroll position on the page. It compares well with the bounding rectangle top of elements on the page.
Let the following code serve as a code reference for you to be able to find an effective way to solve your particular problem.
var nav = document.getElementById("nav"),
about = document.getElementById("about"),
work = document.getElementById("portfolio"),
labs = document.getElementById("labs"),
contact = document.getElementById("contact");
var aboutTop = about.getBoundingClientRect().top,
workTop = work.getBoundingClientRect().top,
labsTop = labs.getBoundingClientRect().top,
contactTop = contact.getBoundingClientRect().top;
var scroller = setInterval(function() {
var scrollTop = document.body.scrollTop;
var offset = 20; // So the color changes just a bit before reaching the position
scrollTop = scrollTop + offset;
if (scrollTop < aboutTop) {
nav.style['background-color'] = "#f0f0f0";
} else if (scrollTop<workTop && scrollTop>=aboutTop) {
nav.style['background-color'] = "red";
} else if (scrollTop<labsTop && scrollTop>=workTop) {
nav.style['background-color'] = "green";
} else if (scrollTop<contactTop && scrollTop>=labsTop) {
nav.style['background-color'] = "black";
} else if (scrollTop>=contactTop) {
nav.style['background-color'] = "blue";
}
}, 5);
body {
padding-top: 40px;
}
nav {
background-color: #f0f0f0;
padding: 5px 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
nav ul {
padding: 0;
}
nav ul li {
list-style: none;
display: inline-block;
padding: 0 5px;
}
nav ul li a {
text-decoration: none;
color: white;
}
nav ul li a:hover {
text-decoration: underline;
}
.anchor {
display: block;
position: relative;
top: -55px;
visibility: hidden;
}
<nav id="nav">
<ul>
<li>About</li>
<li>Work</li>
<li>Labs</li>
<li>Contact</li>
</ul>
</nav>
<a class="anchor" id="about"></a>
<section id="about-section">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p>
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p>
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p>
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p>
</section>
<a class="anchor" id="portfolio"></a>
<section id="portfolio-section">
<h1>Work</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p>
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p>
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p>
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p>
</section>
<a class="anchor" id="labs"></a>
<section id="labs-section">
<h1>Labs</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p>
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p>
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p>
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p>
</section>
<a class="anchor" id="contact"></a>
<section id="contact-section">
<h1>Contact</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum mi, auctor quis lobortis at, rutrum sed ante. Etiam ipsum nisi, lobortis eget sem non, iaculis consectetur diam. Vestibulum accumsan diam nec luctus lobortis. Donec rhoncus est vitae diam ultrices, at gravida purus ultrices. Morbi blandit enim turpis, sit amet aliquam urna convallis et. Proin eleifend, nibh non sodales hendrerit, massa ex consequat sem, vel cursus ante enim ac ex. Suspendisse pellentesque dui felis, non condimentum nunc vehicula vitae. Suspendisse laoreet, dui ut fringilla gravida, arcu quam pharetra erat, nec maximus enim leo quis nisl. Aliquam sit amet euismod mi. Pellentesque sollicitudin, arcu id malesuada facilisis, magna mi lobortis mi, sit amet dictum elit lorem sit amet augue. Praesent mauris tortor, ullamcorper in laoreet et, malesuada vel lectus.</p>
<p>Mauris quis tincidunt ipsum, id auctor dui. Phasellus vel quam quam. Nulla facilisi. Duis ullamcorper tempor varius. Praesent cursus venenatis libero vitae mattis. Suspendisse potenti. Vivamus convallis ullamcorper condimentum. Fusce vel semper urna. Donec ac lacus magna. Sed imperdiet dolor ut urna accumsan hendrerit. Etiam ac ipsum vitae nisi egestas pellentesque. Ut vitae vestibulum purus. Aliquam aliquet tristique scelerisque.</p>
<p>Donec viverra hendrerit congue. Nam consequat justo non ligula feugiat, cursus hendrerit urna ornare. Pellentesque pellentesque metus non orci fringilla, id eleifend lectus pharetra. Integer scelerisque leo ex, sed imperdiet enim blandit a. Nam eget ante sit amet libero elementum vulputate in vitae velit. Ut quis lobortis sapien, nec volutpat neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc convallis mi et quam malesuada euismod. Mauris posuere massa odio, dictum venenatis tellus feugiat ut. Etiam bibendum tellus nulla, pretium venenatis erat pellentesque sed. Phasellus viverra eu enim non egestas. Nullam aliquam sed metus a volutpat.</p>
<p>Mauris quis eros non orci varius lacinia. Morbi aliquet consectetur neque malesuada tincidunt. Morbi ornare rhoncus risus. Mauris condimentum arcu vel tincidunt bibendum. Curabitur magna tortor, sollicitudin vitae dolor sit amet, lobortis luctus felis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec enim ut elit pretium blandit eget convallis lacus. Suspendisse aliquet mattis tortor, nec tincidunt mauris suscipit at. Etiam pharetra lectus sed pharetra congue. Integer molestie arcu ut enim dignissim mollis. Mauris vitae luctus dolor, a sollicitudin magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam enim felis, suscipit id felis lobortis, fringilla elementum erat. Praesent sagittis, sapien eu feugiat ultricies, mi metus egestas augue, vitae vulputate diam arcu vitae felis.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eu pulvinar purus. Quisque dictum accumsan congue. Etiam mollis diam nulla, in vulputate dui blandit a. Aliquam diam libero, dignissim id erat vitae, laoreet semper eros. Fusce iaculis rhoncus leo, quis scelerisque metus placerat ac. Etiam tellus nunc, congue ac euismod ut, convallis eu velit.</p>
</section>

BX-Slider to adjust adaptive height with Read More button

I'm using bx-slider. I was tasked at adding a "Read More" button for one of the slides, which should expand the slide height. The problem is that the BX-slider won't recalculate the height when I run the readmore.js function. Is there a way to call the adaptive height function at the same time that I click the "Read More" function from a different plugin?
Thank you
$(document).ready(function() {
$('.bxslider').bxSlider({
adaptiveHeight: true,
pagerCustom: '#bx-pager'
});
});
$('.readmore').readmore();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<ul class="bxslider">
<li>
<div class="readmore">
<h3>Slide with "Read More" Button. </h3>
<p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not adjust.</p>
<p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
</div>
</li>
<li>
<h3>Other Slide</h3>
<p>
Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
</p>
</li>
</ul>
Use
bxSlider API - onSliderResize callback
Readmore API - afterToggle callback
bxSlider can get non-responsive to events that indirectly resizes it's dimensions. You can "wake" it up by directly resizing .bx-viewport.
function bxAdjust(idx) {
$('.bx-viewport').height("0").height('100%');
}
Use that simple function as the callback for both onSliderResize and afterToggle. Working Snippet below.
SNIPPET
$(document).ready(function() {
var bx = $('.bxslider').bxSlider({
adaptiveHeight: true,
pagerCustom: '#bx-pager',
onSliderResize: bxAdjust
});
});
function bxAdjust(idx) {
$('.bx-viewport').height("0").height('100%');
}
$('.readmore').readmore({
afterToggle: rmAdjust
});
function rmAdjust(tgr, ele, exp) {
bxAdjust();
if (exp) {
tgr = 'Close';
} else {
tgr = 'Read More';
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script src="https://fastcdn.org/Readmore.js/2.1.0/readmore.min.js"></script>
<ul class="bxslider">
<li>
<div class="readmore">
<h3>Slide with "Read More" Button. </h3>
<p>First click on the "Read More" button. I'd like the adaptive height to kick in at this point. If you click either arrow arrow, and return back to this slide, the height is adjusted. But then if you click the close button, the height also does not
adjust.
</p>
<p>Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis, neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem
vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero. Etiam in odio eget erat molestie aliquet. Proin rutrum nunc ut eros consectetur, id pretium mauris euismod. Aliquam facilisis,
neque ac pharetra iaculis, risus purus maximus augue, nec efficitur libero lacus id mauris. Duis sagittis massa nec lorem vestibulum, ac tempus enim eleifend. Pellentesque condimentum facilisis ante id efficitur. Nullam in congue metus, vel consectetur
nibh. Curabitur ut suscipit eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vel odio feugiat, feugiat quam non, tincidunt mauris. Etiam non efficitur justo, interdum suscipit libero.</p>
</div>
</li>
<li>
<h3>Other Slide</h3>
<p>
Praesent vulputate metus volutpat nibh ornare, vitae suscipit lacus vehicula. Aenean accumsan ornare placerat. Curabitur ullamcorper vehicula nisi quis pellentesque. Mauris viverra massa non mattis convallis. Nunc accumsan libero sagittis quam consectetur
pulvinar. Quisque euismod lacinia magna id sagittis. Aenean tempor est placerat hendrerit pellentesque. Praesent id vehicula odio, eget condimentum dolor. In vehicula lacinia efficitur. Vivamus nec iaculis ante, sit amet facilisis dui. Nunc imperdiet,
dolor nec posuere vulputate, metus mi lobortis ligula, nec posuere diam nunc eu dolor. Donec non rhoncus justo. Vestibulum sagittis quis leo quis hendrerit. Phasellus quis arcu quis ligula luctus dapibus. Suspendisse gravida elementum arcu ut luctus.
</p>
</li>
</ul>

How to scroll the div by the scroll bar only of same div?

I just want to scroll the div ( overflow scroll ) by only the bar in right hand side not on mouse roll, touch.
body
{
height:1000px
}
.news_list {
display: block;
overflow-y: scroll;
height: 200px;
width:200px;
margin:auto;
border:solid 1px;
}
<body><div class="news_list">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</body>
Prevent mousewheel event default action using event.preventDefault() or by returning false return false;
$('.news_list').on('mousewheel', function(e) {
e.preventDefault();
});
body {
height: 1000px
}
.news_list {
display: block;
overflow-y: scroll;
height: 200px;
width: 200px;
margin: auto;
border: solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="news_list">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla
mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
</div>
</body>
demo
$(".news_list").bind("mousewheel", function () {
return false;
});
Cancel the mousewheel on the div with class news_list

Is there any way to scroll the div with overflow:hidden

I have a div with css overfow:hidden. But I need scrolling in this div. I googled it and find the solution is to change the overflow:scroll and hide the scrollbar. But in macbook pro, I am able to see the scrollbar. Is there any way to solve this problem?
Youtube solves this through toggling between overflow-y: hidden; padding-right: 17px and overflow-y: scroll; padding-right: 0; through :hover.
It makes it look neat, and it lets the user know that you can scroll. Consider to tell your users that, instead of asuming that they know it.
Try like this
<style type="text/css">
.inside { width: 500px; overflow: auto; height: 200px; padding-right: 20px; }
.outside { width: 500px; height: 300px; overflow: hidden; }
</style>
<div class="outside">
<div class="inside">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium enim blandit ligula pharetra pharetra. Curabitur posuere nibh at nibh tincidunt sed porta dui commodo. Suspendisse id vulputate magna. Cras non arcu ac lacus dignissim pretium. Aenean varius luctus ante, sed tincidunt neque euismod id. Sed aliquam dui eu purus dapibus venenatis. Praesent tortor sem, pretium in rhoncus eu, eleifend at lectus. Donec dignissim turpis et lectus interdum dignissim. Maecenas porttitor ante ut ligula tempus sit amet tincidunt arcu aliquam. Vivamus at velit massa. Nulla eget ligula sed dolor porta porta sit amet ac est. Vestibulum rhoncus tempus ligula quis vulputate. Nullam auctor, neque tristique ultrices iaculis, neque nisl semper est, id adipiscing ligula est eu diam.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec enim ante, rhoncus at egestas eget, imperdiet vitae sem. Mauris sed massa elit, ac posuere nibh. Integer ut metus et felis blandit pellentesque id eget velit. Quisque vehicula consectetur nibh sit amet posuere. Etiam egestas lacus id justo fringilla sodales. Donec scelerisque aliquam urna sed sodales. Cras ornare neque fringilla nisl molestie venenatis. Quisque quis lacus ut augue sodales tristique non id sapien. Sed risus nisl, egestas eu sodales ut, rhoncus id nisl. Maecenas hendrerit tellus neque. Aliquam sodales gravida luctus. Suspendisse porta porta libero at venenatis. Proin laoreet accumsan ipsum, et ultrices nisi pharetra et. Nullam in dolor quam, et adipiscing ipsum. In consequat interdum sollicitudin. </p>
</div>
</div>
Try overflow: auto; This will show the scroll bar if it is needed, ie the height of the content in the div is larger than the height of the div. Otherwise if the content fits within the bounds of the div, it will not show a scroll bar.
you can use the jquery scrolltop

Categories

Resources