I'm encountering some laggy scrolling issues on my website, specifically within the tabbed gallery section that was created using jQuery.
I've noticed that when I try to scroll while an image tab is active in the gallery, the scrolling performance is not smooth at all.
Can someone please assist me in resolving this problem?
Here's a snippet of the code related to the tabbed gallery:
HTML (Jade):
article.content-box.gallery#osom
ul#homepagetabs.gallerytabs(data-tabs="tabset1")
li.tabs#tab7(data-tab="t1")(style="background-image: url('http://static1.gamespot.com/uploads/original/1551/15511094/3066900-legends-1940x1095.png')")
#tabset1.gallery
#t1.tab.is-acive.current(style="background-image: url('http://fastup.pl/data/Aueternum/Rzeczy%20cyca/maxresdefault.jpg')")
CSS (Stylus):
.tab
display none
animation: animacja
animation-duration: .3s
animation-iteration-count: 1
animation-timing-function: ease-in-out
animation-fill-mode: both
&.is-active
display block
width: 100%
height: 85vh
background-position: center
background-size: cover
border: 5px solid $pink
.gallerytabs
display: flex
margin: 0
padding: 0
align-items: center
width: 100%
.tabs
flex: 1
height: 70px
margin: 25px 5px
background-position: center
background-size: cover
border: 1px solid $pure-pink
filter: grayscale(100%)
transition: 0.3s ease-in-out
position relative
z-index 1
&:hover
filter: none
cursor: pointer
&.is-active
filter: none
.gallery
width: 100%
height: 100vh
JS (jQuery)
$('[data-tab]').on('click', function() {
var $btn = $(this).attr('data-tab');
var $wrapper = $(this).parent().attr('data-tabs');
var activeClass = 'is-active';
$('[data-tabs='+$wrapper+']'+' [data-tab]').removeClass(activeClass);
$('[id='+$wrapper+']'+' .tab').removeClass(activeClass);
$(this).addClass(activeClass);
$('[id='+$btn+']').addClass(activeClass);
});