Turn off automatic vertical scrolling when refreshing thumbnails with scrollIntoView()

My Image Gallery Slider has a feature that uses ScrollIntoView() for its thumbnails, but whenever I scroll up or down the page and a new thumbnail is selected, it brings the entire page back to the location of that thumbnail. Is there a way to turn off this scrollIntoView() functionality? You can check out the project here: https://codepen.io/abcretrograde/pen/povVxVq

    function updateImage() {
  const thumbs = document.querySelectorAll(
    "#jsSlideshow .js-slideshow__thumb-image"
  );
  clearInterval(autoUpdate);
  autoUpdate = setInterval(() => {
    incImage();
  }, slideSpeed);
  const newOffset = getImagePos(imageWidthArray, whichImage);
  slideshow.style.setProperty("--offset", newOffset + "px");
  thumbs.forEach((thumb) => {
    thumb.classList.remove("js-slideshow__thumb-image--selected");
  });
  thumbs[whichImage].classList.add("js-slideshow__thumb-image--selected");
  thumbs[whichImage].scrollIntoView({
    behavior: "auto",
    block: 'center',
    inline: "center",
  });
}

Answer №1

The block property - scrollIntoView(options) - specifies the vertical alignment.

Have you attempted to switch from center to nearest?

  thumbs[whichImage].scrollIntoView({
    behavior: "auto", 
    block: "nearest",
    inline: "center"
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving the class name using jQuery

In my HTML code, there is a div with three classes defined as: <div class = "a b c"> .. </div> My goal is to access only the class b using the .attr() method. Is this achievable? ...

Containers do not line up properly with each other. Adjusting the width leads to unexpected consequences

As someone who is new to HTML and CSS, I am facing a challenge with aligning the items within a navigation bar on my website. The list serves as a navigation bar and is contained inside the "inner header" div. While I was able to align the entire "nav" con ...

Struggling to make AngularJS routes function properly

After starting from scratch, I rebuilt it with freshly downloaded angularJS (version 1.5.8). I simply placed both angular.js and angular-route.js in the library folder following this setup: https://gyazo.com/311679bf07249109671d621bc89d2d52 Here is how in ...

Optimizing WordPress with server-side AJAX caching

I am looking for a way to store AJAX responses on the server side rather than constantly retrieving data from the database every time a client makes a request. function post_filter($filter_action,$filter_values) { var ajaxurl = SiteInfo.home_url+&apos ...

Exploring keypad.js and the use of serialization in conjunction with $.post

Currently delving into the realm of jQuery as I work on a website for employees. The goal is to grant entry through a unique keypad code assigned to each employee. However, my progress hit a snag when I stumbled upon this script and struggled to get it to ...

Locator for finding compound text within a div class using Selenium WebDriver

I am struggling to select a specific button in the UI that shares similarities with other elements. Below is the code snippet for the button in question: <div class="ui green ok inverted button"> <i class="checkmark icon"></i> Yes </d ...

What is the best way to verify that a check should have various attributes using chai-things?

Searching for a way to verify if an array in my mocha tests consists of an Object in my Node.js application, I discovered that with Chai-Things, I can use: [{ pet: 'cat' }, { pet: 'dog' }].should.include({ pet: 'cat' }) or ...

The problem with "em" in CSS: preventing it from scaling based on the font-size of a particular element

My website predominantly utilizes "em" for design over "px," which is meant to be more compatible with modern browsers. Most of the text is set at font-size:1em, where 1em equals 16px as a default without specific specification. However, there are sectio ...

Generating individual div elements for every piece of data in ReactJS with the help of Redux

I am utilizing redux to manage the data within a React application. Each block of data is displayed within its own DIV element. My goal is to have each div separated by space and transformed into an accordion card. I am seeking guidance on the best appro ...

Trigger function in React after the page finishes loading

I have a scenario where I need to display images onDrop within one of my components. To ensure a smooth drop experience, I am considering preloading the images using the following approach: componentDidMount(){ this.props.photos.forEach(picture => ...

Implementing real-time style changes with Angular 6 through Environment Variables

Attempting to dynamically change styles in Angular 6 using environment variables has been a success for me. Here is how my file structure is organized: src -app -assets -environments -scss -theme1.scss -theme2.scss -_variables.scss -styles.sc ...

Utilizing multiple classes in HTML for a button element

  I've recently come across the concept that elements can have multiple classes. It's interesting, isn't it? .rfrsh-btn { background-image:url(../../upload/rfrsh_nb_grey.png); ... } .submit { font-size: 0.85em; paddi ...

What is the best way to prevent excessive rerenders when verifying if database information has been successfully retrieved?

Hey there, I'm encountering an issue where the if statement check in my code is causing a "too many rerenders" problem. I'm trying to create a delay between pulling data from the database and calculating the BMI. Any suggestions on how to resolve ...

"What are some creative ways to customize the appearance of a Material-UI Select-field Dropdown menu

I am currently utilizing the material-ui select-field component. <SelectField multiple={true} hintText="Checkbox Filters" dropDownMenuProps={{ iconButton:<ActionHome />, }} className="checkbox-com" underlineStyle={{display ...

Ways to retrieve information from the object received through an ajax request

When making an AJAX request: function fetchWebsiteData(wantedId) { alert(wantedId); $.ajax({ url: 'public/xml/xml_fetchwebsite.php', dataType: 'text', data: {"wantedid": wantedId}, typ ...

Issues with posting form data in AngularJS are occurring

Here is the code I am currently using: On the Angular side vm.onSubmit = function(){ var person = vm.formData.slice(0, 1)[0]; //This line extracts the required fields from the model object which is nested in an array. $http({ ...

The information retrieved from the API is not appearing as expected within the Angular 9 ABP framework

I am facing an issue with populating data in my select control, which is located in the header child component. The data comes from an API, but for some reason, it is not displaying correctly. https://i.stack.imgur.com/6JMzn.png. ngOnInit() { thi ...

The integration of OCS in a SharePoint web part using AJAX technology

Currently, I am working on a web part that utilizes AJAX to display search results. The results include usernames with OCS presence indicators displayed opposite each name. While the indicator works fine in IE6, unfortunately, it does not function properly ...

Is there a way to keep the input field data in my form in next js persist even after the page refreshes?

I am currently developing a form in Next.js and I need the data to persist even after the page is refreshed or reloaded. Unfortunately, local storage does not work with Next.js, so I am exploring other alternatives. Every time I try to use local storage, ...

Having trouble getting `sudo apt install npm` to work? You might be encountering the error message "The following packages have unmet dependencies

Creating dependency tree Retrieving status information... Completed Certain packages could not be installed. This might indicate that you have requested an unrealistic scenario or if you are utilizing the unstable version, some necessary packages could s ...