>

2 개의 DIV가있는 컨테이너가 있습니다. 버튼을 클릭하면 컨테이너에서 노란색 DIV를 가로로 가운데에 배치하려고합니다. 그러나 버튼을 여러 번 클릭하면 앞뒤로 스크롤되며 컨테이너를 수동으로 스크롤 한 다음 버튼을 클릭하면 노란색 DIV가 스크롤되지 않습니다.

여기 jsfiddle이 있습니다. 버튼을 반복해서 클릭하면 앞뒤로 스크롤됩니다. 왜 그렇게합니까? : https://jsfiddle.net/nug4urna/

HTML :

<div id='container'>
<div id='blue'></div>
<div id='yellow'></div>
</div>
<div id='mybutton'>
click to scroll yellow div into view
</div>
<div id='log'>
</div>

JAVSCRIPT :

function scrollDivIntoView(id) {
      var elOffset = $(id).offset().left;
      var elWidth = $(id).width();
      var containerWidth = $('#container').width();
      var offset = elOffset - ((containerWidth - elWidth) / 2);
      $('#container').scrollLeft(offset);
      var _log = 'elOffset = ' + elOffset + '<br>';
      _log += 'elWidth = ' + elWidth + '<br>';
      _log += 'containerWidth = ' + containerWidth + '<br>';
      _log += 'offset = ' + offset;
      $('#log').html(_log);
}
$(document).ready(function() { 
    $('body').on('click', '#mybutton', function(){ 
        scrollDivIntoView('#yellow');
    }); 
});

CSS :

#container{
  width:100%;
  height:150px;
  border:1px solid red;
  display:inline-block;
  white-space:nowrap;
  overflow-y:hidden;
  overflow-x:auto;
}
#blue{
  width:2000px;
  height:100px;
  background-color: blue;
  margin:5px;
  display:inline-block;
}
#yellow{
  width:200px;
  height:100px;
  background-color: yellow;
  margin:5px;
  display:inline-block;
}
#mybutton{
  margin-top:10px; 
  cursor:pointer;
  background-color:black;
  color:white;
  width:400px;
  padding:4px;
  text-align:center;
}


  • 답변 # 1

    첫 줄을 var elOffset = $(id)[0].offsetLeft; 로 바꾸면  원래 코드는 모든 상황에서 항상 작동합니다.

    자세한 내용은 다음을 참조하십시오. https://javascript.info/size-and-scroll

  • 답변 # 2

    가운데 가운데를 맞추려면 오른쪽에 "채우기"위해 오른쪽에 여백을 노란색 컨테이너에 추가해야합니다. . 나는 당신의 바이올린을 업데이트했습니다 : https://jsfiddle.net/nug4urna/2/

    #yellow{
      width:200px;
      height:100px;
      background-color: yellow;
      margin:5px;
      display:inline-block;
      margin-right: 100%;
    }
    
    

    또한 앞뒤로 점프하는 이유는 계산이 var elOffset = $(id).offset().left; 에 기초하기 때문입니다   클릭 할 때마다 변경됩니다. 오프셋이 컨테이너 너비보다 큰지 확인하기 위해 바이올린을 업데이트했습니다. 적 으면 업데이트를 방지합니다.

     if (elOffset > containerWidth) {
        $('#container').scrollLeft(offset);
      }
    
    

    업데이트 : 이것은 처음에는 작동하지만 사용자가 스크롤하면 계산이 정확하지 않습니다. 스크롤 막대가 실제로 얼마나 멀리 이동할 수 있는지 계산하려면 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollWidth를 참조하십시오. 막대가 오른쪽으로 완전히 이동하여 모든 내용을 표시하면 숫자 값이 총 너비와 동일하지 않음을 의미합니다.

관련 자료

  • 이전 mysql - 임의의 행 ID로 사용할 행 수 선택
  • 다음 javascript - d3scaleQuantize의 대안?