전체 페이지를 이동하도록 ScrollInView()

programing

전체 페이지를 이동하도록 ScrollInView()

mbctv 2023. 8. 15. 00:14

전체 페이지를 이동하도록 ScrollInView()

는 사용중을 하고 있습니다.ScrollIntoView()목록에서 강조 표시된 항목을 보기로 스크롤합니다.
때 아로스크할롤때래때▁when할롤.ScrollIntoView(false)완벽하게 작동합니다.

위로 하만위로스을하면롤크지,하면.ScrollIntoView(true)제가 생각하기에 페이지 전체가 약간 움직이게 합니다.

사용 시 전체 페이지 이동을 방지할 수 있는 방법이 있습니까?ScrollIntoView(true)?

내 페이지의 구조는 다음과 같습니다.

#listOfDivs {
   position:fixed;
   top:100px;
   width: 300px;
   height: 300px;
   overflow-y: scroll;
}

<div id="container">
     <div id="content"> 
          <div id="listOfDivs"> 
               <div id="item1"> </div>
               <div id="item2"> </div>
               <div id="itemn"> </div>
          </div>
     </div>
</div>

listOfDivs사파리를 사용하는 입니다.모바일 사파리를 사용합니다.

다음으로 수정:

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })

참조: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

사용할 수 있습니다.scrollTop에 scrollIntoView():

var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;

jsFiddle: http://jsfiddle.net/LEqjm/

스크롤하려는 스크롤 가능한 요소가 둘 이상 있는 경우scrollTop각의개 로으적로별기, 으준각로를 으로 각각 offsetTop방해 요소의 s.이렇게 하면 현재 발생하고 있는 문제를 방지할 수 있는 세부적인 제어 기능이 제공됩니다.

편집: offsetTop은 상위 요소와 반드시 관련이 있는 것은 아닙니다. 첫 번째 위치에 있는 상위 요소와 관련이 있습니다.상위 요소가 배치되지 않은 경우(상대, 절대 또는 고정) 두 번째 줄을 다음으로 변경해야 할 수 있습니다.

target.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop;

var el = document.querySelector("yourElement");
window.scroll({top: el.offsetTop, behavior: 'smooth'});

저도 이런 문제가 있었고, 그것을 해결하기 위해 많은 시간을 보냈습니다.저는 제 결심이 여전히 몇몇 사람들에게 도움이 되기를 바랍니다.

내 해결책은 다음과 같습니다.

: Chrome 변경하기 우경: 변경.scrollIntoView().scrollIntoView({block: 'nearest'})(@jfrohn 덕분분).
Firefox의: Firefox를 합니다.overflow: -moz-hidden-unscrollable;이동하는 컨테이너 요소에서.
다른 브라우저에서는 테스트되지 않습니다.

내 맥락에서, 그는 화면에서 끈적끈적한 도구 모음을 누르거나 절대적으로 팹 버튼 옆에 들어갈 것입니다.

가장 가까운 해결책을 사용합니다.

const element = this.element.nativeElement;
const table = element.querySelector('.table-container');
table.scrollIntoView({
  behavior: 'smooth', block: 'nearest'
});

▁with와 .scrollIntoViewIfNeeded()브라우저에서 지원되는지 확인합니다.

ScrollIntoView - http://jsfiddle.net/LEqjm/258/ 의 부적절한 동작을 표시하는 방법을 추가했습니다 [댓글이어야 하지만 평판이 부족합니다].

$("ul").click(function() {
    var target = document.getElementById("target");
    if ($('#scrollTop').attr('checked')) {
        target.parentNode.scrollTop = target.offsetTop;    
    } else {
        target.scrollIntoView(!0);
    }
});

플러그인 jQuery 파일`scrollintoview()`을 높임

기본 DOM 구현 대신 이동을 애니메이션화하고 원하지 않는 효과가 없는 플러그인을 사용할 수 있습니다.기본값과 함께 사용하는 가장 간단한 방법은 다음과 같습니다.

$("yourTargetLiSelector").scrollintoview();

어쨌든 모든 세부 정보를 읽을 수 있는 이 블로그 게시물로 이동하면 플러그인의 GitHub 소스 코드를 얻을 수 있습니다.

이 플러그인은 자동으로 스크롤 가능한 가장 가까운 상위 요소를 검색하고 선택한 요소가 표시되는 보기 포트 안에 있도록 해당 요소를 스크롤합니다.요소가 이미 뷰 포트에 있는 경우에는 당연히 아무 작업도 수행하지 않습니다.

에 더 정보 @Jesco포스트.

Element.scrollIntoViewIfNeeded()non-standard WebKit method Chrome, Opera, Safari 브라우저용입니다.
요소가 이미 브라우저 창의 표시 영역 내에 있는 경우 스크롤이 수행되지 않습니다.
Element.scrollIntoView() 메서드는 호출된 요소를 브라우저 창의 표시 영역으로 스크롤합니다.

다음 코드를 사용해 보십시오.mozilla.org scrollIntoView() 링크를 걸다

var xpath = '//*[@id="Notes"]';
ScrollToElement(xpath);

function ScrollToElement(xpath) {
    var ele = $x(xpath)[0];
    console.log( ele );

    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    if (isChrome) { // Chrome
        ele.scrollIntoViewIfNeeded();
    } else {
        var inlineCenter = { behavior: 'smooth', block: 'center', inline: 'start' };
        ele.scrollIntoView(inlineCenter);
    }
}

최근 VueJs에 대한 제 경험과 작업에 대한 답변을 추가하고자 합니다.아래 코드 조각이 가장 적합하다는 것을 발견했는데, 이 코드는 당신의 애플리케이션에 어떤 영향도 주지 않습니다.

const el = this.$el.getElementsByClassName('your_element_class')[0];
if (el) {
   scrollIntoView(el,
                  {
                       block: 'nearest',
                       inline: 'start',
                       behavior: 'smooth',
                       boundary: document.getElementsByClassName('main_app_class')[0]
                    });
     }

main_app_class입니다.

your_element_class/스는니다입으로 수 입니다.

ScrollInView()를 지원하지 않는 브라우저의 경우 아래 라이브러리를 사용하면 됩니다. 멋진 https://www.npmjs.com/package/scroll-into-view-if-needed .

(Chrome에서) 상단에서 하단으로 스크롤하는 것이 아니라 하단에서 하단으로 스크롤하면 (페이지를 이동하지 않고) 상위 div 상단으로 더 안정적으로 요소를 스크롤할 수 있다는 것을 알게 되었습니다.그렇지 않으면 내 요소가 화면으로 스크롤되는 동안에도 때때로 div 내에서 원하는 것보다 낮을 수 있습니다.

이를 위해 다음 두 단계로 스크롤합니다.

myScrollableDiv.scrollTop = myScrollableDiv.scrollHeight 스크롤이 한 디브의 맨 로 스크롤이 .
(여기의 다른 답변에 따라) 애니메이션을 사용하여 요소를 보기로 스크롤합니다.

myElementWithinTheScrollingDiv.scrollIntoView({
  behavior: 'smooth',
  block: 'nearest',
})

Brilliant의 아이디어를 사용하여 요소가 현재 보이지 않는 경우에만 (수직으로) 스크롤되는 솔루션이 있습니다.이 방법은 뷰포트의 경계 상자와 브라우저 창 좌표 공간에 표시할 요소를 가져오는 것입니다.표시되는지 확인하고 표시되지 않으면 필요한 거리만큼 스크롤하여 요소가 뷰포트의 맨 위나 맨 아래에 표시되도록 합니다.

    function ensure_visible(element_id)
    {
        // adjust these two to match your HTML hierarchy
        var element_to_show  = document.getElementById(element_id);
        var scrolling_parent = element_to_show.parentElement;

        var top = parseInt(scrolling_parent.getBoundingClientRect().top);
        var bot = parseInt(scrolling_parent.getBoundingClientRect().bottom);

        var now_top = parseInt(element_to_show.getBoundingClientRect().top);
        var now_bot = parseInt(element_to_show.getBoundingClientRect().bottom);

        // console.log("Element: "+now_top+";"+(now_bot)+" Viewport:"+top+";"+(bot) );

        var scroll_by = 0;
        if(now_top < top)
            scroll_by = -(top - now_top);
        else if(now_bot > bot)
            scroll_by = now_bot - bot;
        if(scroll_by != 0)
        {
            scrolling_parent.scrollTop += scroll_by; // tr.offsetTop;
        }
    }

ScrollInView()는 페이지 이동을 유발합니다.그러나 다음 코드는 잘 작동하며 화면을 요소의 맨 위로 이동합니다.

window.scroll({
  top: document.getElementById('your-element')?.offsetParent.offsetTop,
  behavior: 'smooth',
  block: 'start',
})

저도 같은 문제가 있었습니다, 저는 그것을 제거함으로써 고쳤습니다.transform:translateY는 CSS i 위에있다에 되었습니다.footer

FWIW: (Chrome 95 및 Firefox 92 (모든 Mac))에서 다음을 사용한다는 것을 발견했습니다.

.scrollIntoView({ behavior:'smooth', block:'center'});

스크롤 가능한 옵션 목록에서 본문 요소를 약간 스크롤할 수 있으므로 다음을 사용하기로 결정했습니다.

.scrollIntoView({ behavior:'smooth', block:'nearest'});

중앙에 원하는 옵션을 지나 옵션을 선택합니다(예: 스크롤 가능한 5줄/옵션을 볼 수 있는 영역에서 원하는 옵션을 지나 두 번째 옵션을 선택하여 원하는 요소를 중앙에 배치했습니다).

언급URL : https://stackoverflow.com/questions/11039885/scrollintoview-causing-the-whole-page-to-move

저작자표시 (새창열림)

전체 페이지를 이동하도록 ScrollInView()

전체 페이지를 이동하도록 ScrollInView()

플러그인 jQuery 파일scrollintoview()을 높임

플러그인 jQuery 파일`scrollintoview()`을 높임