Make as before episodes

[AN0NCER]

Make episodes if selected behind screen hover over them scroll:

function SelectEpisode() {
    const width = document.body.clientWidth;
    episodes.select(dataLocal.kodik_episode, () => { }, (anim) => {
        $('.episodes').scrollLeft(parseInt(anim.animations[0].currentValue) + 132 - width);
    });
}

Function episodes.select

select: function(i=1, e, u){
    const element = $('.episodes > .value > .episode')[(i-1)];
    if(!element){
      return;
    }
    if(this.selected){
      anime({targets:this.selected,color:"#555657",easing: 'easeOutElastic(1, 1)'});
    }
    this.selected = element;
    const left = $(element).position().left;
    anime({
      targets: '.sel',
      left: left,
      complete: function(anim){if(e){e();}},
      update: function(anim) {if(u){u(anim);}},
      easing: 'easeOutElastic(1, 1)'
    });
    anime({
      targets: element,
      color: "#020202",
      easing: 'easeOutElastic(1, 1)'
    })
    this.events.changeselect.forEach(event => event(i));
  }

[AN0NCER]

Data that may be needed

//Current Episode Sizes
const sizeEpisode = (55 + 3); //55 - width; 3-margin
//Gets the scroll left (and also sets it)
$('.episodes').scrollLeft();
//Gets the width of the episodes that hit the screen
$('.episodes').width();
//Gets the left position of the selector
$('.value > .sel').position().left;

First of all, in order to scroll to the selected episode, you need to check that it is located further than half of the shown episodes.
If SelPos is more than half of the shown episode, then hover

Working code example:

let SelPos = $('.value > .sel').position();
const WidthEpisodes = $('.episodes').width();
const sizeEpisode = (55 + 3); 
if ((WidthEpisodes / 2) > SelPos.left) {
    return;
}
$('.episodes').scrollLeft((SelPos.left - (WidthEpisodes / 2) + sizeEpisode));

Ready option

// Get the position of the selected element
const selectedElementPosition = $('.value > .sel').position();

// Get the width of the container with episodes
const episodesContainerWidth = $('.episodes').width();

// Calculate the width of each episode
const episodeWidth = 55 + 3;

// Checking if the selected element is in the left half of the container
if (episodesContainerWidth / 2 > selectedElementPosition.left) {
    // If yes, then we do nothing and exit the function
    return;
}

// Calculate the new scroll value of the container so that the selected element is in the middle
const newScrollLeftValue = selectedElementPosition.left - episodesContainerWidth / 2 + episodeWidth;

// Scroll container to new scroll value
$('.episodes').scrollLeft(newScrollLeftValue);

[AN0NCER]

It is also necessary to calculate for the vertical mode

[AN0NCER]

Triggers to put when setting the episode and changing the screen orientation, taking into account user parameters

[AN0NCER]

Or with animation

anime({
    targets: '.episodes',
    scrollLeft: newScrollLeftValue,
    duration: 500,
    easing: 'easeInOutQuad'
  });

Instead of

// Scroll container to new scroll value
$('.episodes').scrollLeft(newScrollLeftValue);

[AN0NCER]

Ready-made solution for vertical scrolling #33 (reply in thread)

Data that may be needed

//Current Episode Sizes
const sizeEpisode = (70 + 3); //70 - width; 3-margin
//Gets the scroll top (and also sets it)
$('.episodes > .value').scrollTop();
//Gets the height of the episodes that hit the screen
$('.episodes').height();
//Gets the top position of the selector
$('.value > .sel').position().top;

Working code example:

let SelPos = $('.value > .sel').position();
const HeightEpisodes = $('.episodes'). height();
const sizeEpisode = (70 + 3); 
if ((HeightEpisodes / 2) > SelPos. top) {
    return;
}
$('.episodes > .value'). scrollTop((SelPos.top - (HeightEpisodes / 2) + sizeEpisode));

Ready option

// Get the position of the selected element .sel
const selectedElementPosition = $('.value > .sel').position();

// Get block height .episodes
const episodesContainerHeight = $('.episodes').height();

// Height of one episode
const episodeHeight = 70 + 3;

// Checking if the selected element is above half of the .episodes block
if (selectedElementPosition.top < episodesContainerHeight / 2) {
    // If yes, terminate the function
    return;
}

// Scrolling the .episodes block so that the selected element is in the middle
$('.episodes > .value').scrollTop(selectedElementPosition.top - episodesContainerHeight / 2 + episodeHeight);

Can also be done with animation #33 (comment)