How to scroll horizontally to an item in a container while keeping it centered?

Question

I have a list of items in a container. The container takes the full width of the parent, allowing the items to overflow horizontally if needed. Here's what it looks like:

ul {
  list-style: none;
  display: flex;
  overflow-x: auto;
  padding: 0;
  margin: 0;
  border: 1px dotted black;
}

li {
  margin-right: 10px;
}

li:last-child {
  margin-right: 0;
}

a {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 8px;
  color: black;
  background-color: white;
  border: 1px solid black;
}

a.active {
  background-color: blue;
}


  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item
  Item

In the list of items, there is one that has the .active class. I want to horizontally scroll the container in a way such that this item is exactly centered. To do this, I wrote the following function:

function toMiddle(element, container) {
    if (container === undefined) {
        container = window;
    }
    var elementRect = element.getBoundingClientRect();
    var absoluteElementLeft = elementRect.left;
    var middleDiff = (elementRect.width / 2);
    var scrollLeftOfElement = absoluteElementLeft + middleDiff;
    var scrollX = (scrollLeftOfElement - (container.getBoundingClientRect().width / 2));
    container.scrollTop = 0;
    container.scrollLeft = scrollX;
}

And I'm trying to call this to center the container as follows:

toMiddle(document.getElementById("element"), document.getElementById("container"));

Unfortunately, this doesn't seem to work properly. Any idea how I can fix this? And what exactly am I doing wrong here?

Please note, scrollIntoView() works perfectly well, but it scrolls the whole page vertically as well, which is not an acceptable thing for my use case.

Raeesh Alam · Accepted Answer

You can use .offsetLeft method to find distance from left instead of .getBoundingClientRect() method. And count width of active item with .clientWidth method instead of .width and I also added .resize method for active item keeping it centered.

Useful links:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft
https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

function toMiddle(container_id) {
    var container = document.getElementById(container_id);
    var elementRect = document.querySelector('#' + container_id + ' .active');
    var absoluteElementLeft = elementRect.offsetLeft;
    var middleDiff = (elementRect.clientWidth / 2);
    var scrollLeftOfElement = absoluteElementLeft + middleDiff;
    var scrollX = (scrollLeftOfElement - (container.clientWidth / 2));
    container.scrollTop = 0;
    container.scrollLeft = scrollX;
}
/*Initialize on page load*/ 
toMiddle("container");


/*Window resize then active item tab should be centered*/ 
var timeout = 0;
window.onresize = () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
        toMiddle("container");
    }, 500)
}

/*Click on item tab then should be centered*/ 
var allItem = [...document.querySelectorAll('#container li a')]
allItem.forEach(element => {
    element.addEventListener('click', (e)=> {
        allItem.forEach(ele => {
            ele.classList.remove('active');
        })
        /*Add active class*/ 
        e.target.classList.add('active');

        /*Call the function for set item tab in centered*/ 
        toMiddle("container");
    })
});

ul {
    list-style: none;
    display: flex;
    overflow-x: auto;
    padding: 10px;
    margin: 0;
    border: 1px dotted black;
    position: relative;
}
li {
    margin-right: 10px;
}
li:last-child {
    margin-right: 0;
}
a {
    display: block;
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 8px;
    color: black;
    background-color: white;
    border: 1px solid black;
    transition: 0.5s ease-in;
}
a.active {
    background-color: #0156e8;
    border: 1px solid #00389a;
    color: #fff;
}


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15
    Item 16
    Item 17
    Item 18
    Item 19
    Item 20
    Item 21
    Item 22
    Item 23
    Item 24
    Item 25
    Item 26
    Item 27
    Item 28
    Item 29
    Item 30
    Item 31
    Item 32
    Item 33

How to scroll horizontally to an item in a container while keeping it centered?

Answers (1)

Related Questions