JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.min.js"></script>
<dl><dt>Related News</dt>
<dd id="newsScroll">
<div class="scrollbar"><div class="track"><div class="thumb"></div></div></div>
<div class="viewport">
<div class="overview">
<ul>
<li><a href="#">news1</a></li>
<li><a href="#">news2</a></li>
<li><a href="#">news3</a></li>
<li><a href="#">news4</a></li>
<li><a href="#">news5</a></li>
<li><a href="#">news6</a></li>
<li><a href="#">news7</a></li>
<li><a href="#">news8</a></li>
</ul>
<!--/overview--></div>
<!--/viewport--></div>
</dd>
</dl>
CSS
dl { width: 350px; padding: 10px; background: #f6f6f6; }
dt { padding-bottom: 10px; border-bottom: 1px solid #ccc; }
dd { position: relative; }
/* style for tinyscrollbar */
.scrollbar {
float: right;
width: 10px;
background: #ccc;
position: relative;
}
.thumb {
width: 10px;
background: red;
cursor: pointer;
position: absolute;
}
.viewport {
width: 330px;
height: 70px;
overflow: hidden;
position: relative;
background: #efefef;
}
.overview {
position: absolute;
top: 0; left: 0;
}
JavaScript
function scrollOnOff(width) {
width = parseInt(width);
if(width < 650){
$(window).trigger('newsScroll');
$('#newsScroll').attr('id','spNewsScroll');
} else {
// $('.scrollbar').hide();
$('#spNewsScroll').attr('id','newsScroll');
}
};
$(function() {
$(window).bind('newsScroll', function(e) {
$('.scrollbar').show();
$('#newsScroll').tinyscrollbar();
});
var screenWidth = $(this).width();
scrollOnOff(screenWidth);
$(window).on("resize", function(event){
var w = $(this).width();
scrollOnOff(w);
});
});