Scoll inside div with positionning animation
with nicescroll
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.5.1/jquery.nicescroll.min.js"></script>
<div class="container">
<div class="previewer">
<div class="scroll-wrap">
<h3 id="index_0" class="go-top">Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend sapien erat, at tempus ligula congue eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque et dapibus mi. Pellentesque ut convallis sapien. Nam tincidunt porta nulla sodales pretium. Donec sed purus sit amet ipsum commodo semper. Duis ac nisi lectus. Phasellus rutrum tempus diam lobortis euismod. Duis euismod et quam eu lacinia. Phasellus at tellus leo. Phasellus vitae eros non nunc pharetra convallis. Suspendisse odio sem, vehicula a viverra nec, porta ac tellus. Aliquam mollis nibh et nibh volutpat pellentesque. Sed tincidunt porta tortor sed mattis.</p>
<h3 id="index_a" class="go-top">Header one</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend sapien erat, at tempus ligula congue eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque et dapibus mi. Pellentesque ut convallis sapien. Nam tincidunt porta nulla sodales pretium. Donec sed purus sit amet ipsum commodo semper. Duis ac nisi lectus. Phasellus rutrum tempus diam lobortis euismod. Duis euismod et quam eu lacinia. Phasellus at tellus leo. Phasellus vitae eros non nunc pharetra convallis. Suspendisse odio sem, vehicula a viverra nec, porta ac tellus. Aliquam mollis nibh et nibh volutpat pellentesque. Sed tincidunt porta tortor sed mattis.</p>
<h3 id="index_v" class="go-top">Header two </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend sapien erat, at tempus ligula congue eleifend. Class aptent taciti sociosqu ad litora torquent per conubia...
CSS
.previewer {
font-family:verdana;
font-size:15px;
height: 300px;
border: 2px solid #afafaf;
width:300px;
margin:0 auto;
margin-top:1em;
border-radius:6px;
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
display:inline-block;
overflow:hidden;
margin-right:.5em;
}
.scroll-wrap {
}
h3 {
font-size:16px;
font-weight:bold;
display:block;
border:1px solid #efefef;
padding:5px;
}
.previewer.vertical-scroll-disabled > .scroll-wrap{
width:3000px; /* bogus width */
}
JavaScript
/*
Test multiple scrollers inside container.
*/
$('.previewer').niceScroll();
$('.previewer.vertical-scroll-disabled').find('.scroll-wrap').on("mousewheel", function() {
return false;
});