Animate scrollFirefox에서 상단이 작동하지 않음

Animate scrollFirefox에서 상단이 작동하지 않음

이 기능은 잘 작동합니다.원하는 컨테이너의 오프셋까지 본문을 스크롤합니다.

function scrolear(destino){
    var stop = $(destino).offset().top;
    var delay = 1000;
    $('body').animate({scrollTop: stop}, delay);
    return false;
}

하지만 파이어폭스에서는 그렇지 않습니다. 왜죠?

-편집-

승인된 응답에서 이중 트리거를 처리하려면 애니메이션 전에 요소를 중지하는 것이 좋습니다.

$('body,html').stop(true,true).animate({scrollTop: stop}, delay);

Firefox는 오버플로를 다음에 배치합니다.html특별히 다르게 동작하도록 스타일이 지정되지 않은 경우 레벨.

Firefox에서 작동하려면 다음을 사용합니다.

$('body,html').animate( ... );

작업 예제

CSS 솔루션은 다음 스타일을 설정하는 것입니다.

html { overflow: hidden; height: 100%; }
body { overflow: auto; height: 100%; }

저는 JS 솔루션이 가장 덜 침습적일 것이라고 생각합니다.

---

갱신하다

아래의 많은 논의들은 애니메이션화라는 사실에 초점을 맞춥니다.scrollTop두 가지 요소 중 하나를 선택하면 콜백이 두 번 호출됩니다.브라우저 탐지 기능이 제안되었으며 이후에는 더 이상 사용되지 않으며, 일부 기능은 다소 억지스럽습니다.

콜백이 동일하고 많은 컴퓨팅 성능이 필요하지 않은 경우 콜백을 두 번 실행해도 전혀 문제가 되지 않을 수 있습니다.콜백의 여러 호출이 실제로 문제가 되고 기능 탐지를 방지하려면 콜백 내에서 콜백을 한 번만 실행하는 것이 더 간단할 수 있습니다.

function runOnce(fn) { 
    var count = 0; 
    return function() { 
        if(++count == 1)
            fn.apply(this, arguments);
    };
};

$('body, html').animate({ scrollTop: stop }, delay, runOnce(function() {
   console.log('scroll complete');
}));

지원되는 단일 개체에 대해 기능을 감지한 다음 애니메이션을 수행하는 것이 좋지만 한 줄 솔루션은 없습니다.한편, 실행당 한 번의 콜백을 수행하는 약속을 사용하는 방법이 있습니다.

$('html, body')
    .animate({ scrollTop: 100 })
    .promise()
    .then(function(){
        // callback code here
    })
});

업데이트: 기능 탐지를 대신 사용할 수 있는 방법은 다음과 같습니다.애니메이션을 호출하기 전에 이 코드 덩어리를 평가해야 합니다.

// Note that the DOM needs to be loaded first, 
// or else document.body will be undefined
function getScrollTopElement() {

    // if missing doctype (quirks mode) then will always use 'body'
    if ( document.compatMode !== 'CSS1Compat' ) return 'body';

    // if there's a doctype (and your page should)
    // most browsers will support the scrollTop property on EITHER html OR body
    // we'll have to do a quick test to detect which one...

    var html = document.documentElement;
    var body = document.body;

    // get our starting position. 
    // pageYOffset works for all browsers except IE8 and below
    var startingY = window.pageYOffset || body.scrollTop || html.scrollTop;

    // scroll the window down by 1px (scrollTo works in all browsers)
    var newY = startingY + 1;
    window.scrollTo(0, newY);

    // And check which property changed
    // FF and IE use only html. Safari uses only body.
    // Chrome has values for both, but says 
    // body.scrollTop is deprecated when in Strict mode.,
    // so let's check for html first.
    var element = ( html.scrollTop === newY ) ? 'html' : 'body';

    // now reset back to the starting position
    window.scrollTo(0, startingY);

    return element;
}

// store the element selector name in a global var -
// we'll use this as the selector for our page scrolling animation.
scrollTopElement = getScrollTopElement();

이제 방금 페이지 스크롤 애니메이션의 선택기로 정의한 변수를 사용하고 일반 구문을 사용합니다.

$(scrollTopElement).animate({ scrollTop: 100 }, 500, function() {
    // normal callback
});

왜 내 코드가 작동하지 않는지 알아내려고 오랫동안 노력했어요

$('body,html').animate({scrollTop: 50}, 500);

문제는 내 css에 있었습니다.

body { height: 100%};

로 설정했습니다.auto대신 (그리고 왜 그것이 설정되었는지에 대해 걱정하게 되었습니다.100%애당초)그것이 저를 위해 고쳐주었습니다.

플러그인을 사용하여 문제를 피하는 것이 좋습니다. 더 구체적으로는 내 플러그인입니다. :)

기본적인 문제가 해결된 지 오래지만(브라우저마다 창 스크롤을 위해 다른 요소를 사용함), 심각한 문제가 발생할 수 있습니다.

• 둘 다 애니메이션화하는 것입니다.body그리고.html 문제가 있습니다.
• 기능 테스트 - 실제 브라우저 동작을 올바르게 파악하기 어렵습니다(@Stephen의 답변에 대한 내 의견 참조).
• 그러나 가장 중요한 것은 적절한 사용자 환경을 위해 해결하고자 하는 사용성 문제가 매우 많다는 것입니다.

저는 분명히 편견을 가지고 있지만, 사실 jQuery.scrollable은 이러한 문제를 해결하기 위한 좋은 선택입니다.(사실, 저는 그것들을 모두 처리하는 다른 플러그인을 모릅니다.)

또한 이 요지의 함수를 사용하여 목표 위치(스크롤한 위치)를 방탄 방식으로 계산할 수 있습니다.

그 모든 것들이 당신에게 남겨질 것입니다.

function scrolear ( destino ) {
    var $window = $( window ),
        targetPosition = getScrollTargetPosition ( $( destino ), $window );

    $window.scrollTo( targetPosition, { duration: 1000 } );

    return false;
}

이것을 조심하세요.파이어폭스나 익스플로러를 사용하여 스크롤할 때도 동일한 문제가 있었습니다.

$('body').animate({scrollTop:pos_},1500,function(){do X});

그래서 저는 데이빗이 말한 대로 사용했습니다.

$('body, html').animate({scrollTop:pos_},1500,function(){do X});

잘 작동했지만, 새로운 문제는 본체와 html이라는 두 가지 요소가 있기 때문에 기능이 두 번 실행된다는 것입니다. 즉, 두 X는 두 번 실행됩니다.

'html'로만 시도했고 파이어폭스와 익스플로러는 작동하지만, 이제 크롬은 이를 지원하지 않습니다.

그래서 크롬에는 본문이 필요했고 파이어폭스와 익스플로러에는 html이 필요했습니다.jQuery 버그인가요?몰라.

두 번 실행되므로 기능에 주의하십시오.

에 의존하지 않는 것이 좋습니다.body도 아니다html보다 휴대성이 뛰어난 솔루션입니다.스크롤된 요소를 포함하는 것을 목표로 하는 div를 본문에 추가하고 원하는 스타일을 지정하여 전체 크기 스크롤을 사용할 수 있습니다.

#my-scroll {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}

외 (단, 그럼)display:block;그리고.top:0;left:0;을 합니다.$('#my-scroll')당신의 애니메이션을 위하여.

이게 진짜 거래야.크롬과 파이어폭스에서 완벽하게 작동합니다.일부 무지한 사람들이 저를 부결시키는 것은 심지어 슬픈 일입니다.이 코드는 말 그대로 모든 브라우저와 마찬가지로 완벽하게 작동합니다.링크를 추가하고 스크롤할 요소의 id를 href에 넣으면 아무것도 지정하지 않고 작동합니다.재사용 가능하고 신뢰할 수 있는 순수 코드입니다.

$(document).ready(function() {
  function filterPath(string) {
    return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }
});

저는 최근에 같은 문제에 직면했고 다음과 같은 방법으로 문제를 해결했습니다.

$ ('html, body'). animate ({scrollTop: $ ('. class_of_div'). offset () .top}, 'fast'});

그리고 유피!!!모든 브라우저에서 작동합니다.

위치 지정이 올바르지 않은 경우 다음을 수행하여 오프셋().top에서 값을 뺄 수 있습니다.

$ ('html, body'). animate ({scrollTop: $ ('. class_of_div'). offset () .top-desired_value}, 'fast'});

저에게 문제는 URL에 입력한 해시 이름과 동일한 속성을 가진 anchor로 파이어폭스가 자동으로 점프하는 것이었는데, 이를 방지하기 위해 .preventDefault()를 넣었음에도 불구하고.그래서 이름 속성을 바꾼 후에 파이어폭스는 자동으로 앵커로 점프하지 않고 애니메이션을 제대로 수행했습니다.

@토니 만약 이것이 이해할 수 없다면 미안합니다.www.someurl.com/ #hasname과 같은 URL에서 입니다. www.someurl.com/ #hasname과 같은 했습니다.그리고 예를 들어 저는 앵커가 있었습니다.<a name="hashname" ...></a>jQuery가 자동으로 스크롤해야 하는 위치입니다.하지만 그것은 스크롤 애니메이션 없이 파이어폭스에서 일치하는 이름 속성으로 바로 앵커로 점프했기 때문에 그렇지 않았습니다.이름과 했는데, 를 들어 " 일이름속성해이시다것변른으경다로니했습과름을단다"로 변경했습니다. 예를 들어,name="hashname-anchor"스크롤이 작동했습니다.

저는 애니메이션 시점에 ID를 추가하는 것을 피했습니다.

회피:

 scrollTop: $('#' + id).offset().top

ID를 미리 준비하고 대신 다음 작업을 수행합니다.

 scrollTop: $(id).offset().top

FF로 고정. (css 추가는 나에게 차이를 주지 않았습니다.)

setTimeout(function(){                               
                   $('html,body').animate({ scrollTop: top }, 400);
                 },0);

이게 먹히길 바랍니다.

언급URL : https://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox