.active가 있는 자료를 auto scroll 주기

overflow-x: auto; 를 갖고 있는 div가 있고, 그 안에 여러 가지 이미지가 들어있다. 즉, 가로로 스크롤 되는 기능.

그리고 이미지 중 active를 갖고 있는 이미지는 border가 적용된다.

페이지에 진입할 때, active 클래스를 갖고 있는 자료가 화면 가운데에 보이도록 하는 기능을 넣기로 했다.

            <div class="growthHorizontalWrapper">
              <div class="growthWrapper">
                <img
                  src="./images/image(n).svg"
                  alt="이미지"
                />
              </div>
              <div class="growthWrapper">
                <img
                  src="./images/image(n).svg"
                  alt="이미지"
                />
              </div>
              <div class="growthWrapper">
                <img
                  src="./images/image(n).svg"
                  alt="이미지"
                />
              </div>
              <div class="growthWrapper">
                <img
                  src="./images/image(n).svg"
                  alt="이미지"
                />
              </div>
              <div class="growthWrapper">
                <img
                  src="./images/image(n).svg"
                  alt="이미지"
                />
              </div>
              <div class="growthWrapper">
                <img
                  src="./images/image(n).svg"
                  alt="이미지"
                />
            </div>

.growthHorizontalWrapper {
  display: flex;
  width: 100%;
  overflow-x: auto;
}

.growthWrapper {
  width: 113px;
  height: 185px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  margin: 8px 23px 16px 0;
  padding: 20px 16px;
  text-align: center;
  justify-content: end;
  align-items: center;
}

.growthWrapper.active {
  border: solid 1px #005500;
}

ajax (
type,
url,
data,
success {
...
	$(".growthHorizontalWrapper").scrollCenter(".active", 300);
...
	}
)

jQuery.fn.scrollCenter = function (elem, speed) {
  // this = .growthHorizontalWrapper
  // elem = .active

  var active = this.find(elem); 
  // .active를 갖고 있는 요소를 찾아 active에 할당
  
  var activeWidth = active.width() / 2; 
  // 그 요소의 가운데 지점을 activeWidth에 할당

  var pos = active.position().left + activeWidth; 
  //그 요소의 왼쪽으로부터 요소의 가운데지점까지를 pos 에 할당
  
  var currentscroll = this.scrollLeft(); 
  // 현재의 왼쪽 포지션을 currentscroll에 할당
  
  var divwidth = this.width(); 
  //그 요소의 width를 divwidth에 할당
  
  pos = pos + currentscroll - divwidth / 2; 

  this.animate(
    {
      scrollLeft: pos,
    },
    speed == undefined ? 1000 : speed
  );
  // pos의 위치로 scrollLeft 해줌
  
  return this;
};