OK, I have an HTML page that contains two scrolling divs. The two divs I have are:
content-hoo-m
content-hoo-s
In both divs I have anchored links, for example
<a href="#1">Link 1</a>
<a href="#2">Link 2</a>
<a href="#3">Link 3</a>
<a href="#4">Link 4</a>
These link to anchors in content-hoo-s.
But when you click on the links both divs start to scroll. This is the JavaScript I am using to perform this task:
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#scrollbar").mCustomScrollbar({
scrollButtons:{enable:true,scrollType:"stepped"},
keyboard:{scrollType:"stepped"},
mouseWheel:{scrollAmount:188},
theme:"rounded-dark",
autoExpandScrollbar:true,
snapAmount:188,
snapOffset:65
});
});
})(jQuery);
</script>
<script type="text/javascript">
$("a[href*='#']").click(function(e){
var val=$(this).attr("href").split("#")[1]; //get just the id value
if($("#"+val).parents(".mCustomScrollbar").length){
//prevent default behavior and call method
//only if id is within content with custom scrollbar!
e.preventDefault();
$(".scrollbar").mCustomScrollbar("scrollTo","#"+val);
}
});
</script>
<script>
(function($){
$(window).load(function(){
$("#scrollbar-s").mCustomScrollbar({
scrollButtons:{enable:true,scrollType:"stepped"},
keyboard:{scrollType:"stepped"},
mouseWheel:{scrollAmount:188},
theme:"rounded-dark",
autoExpandScrollbar:true,
snapAmount:188,
snapOffset:65
});
});
})(jQuery);
</script>
<script type="text/javascript">
$("a[href*='#']").click(function(e){
var val=$(this).attr("href").split("#")[1]; //get just the id value
if($("#"+val).parents(".mCustomScrollbar").length){
//prevent default behavior and call method
//only if id is within content with custom scrollbar!
e.preventDefault();
$(".scrollbar-s").mCustomScrollbar("scrollTo","#"+val);
}
});
</script>
Is there away in which I can target the specific div to stop both scrolling at the same time. I just want one to scroll at a time.
Any help would be greatly appreciated.