애니메이션 scrollTop 파이어 폭스에서 작동하지

해결법

1.특별히 다르게 행동하는 스타일하지 않는 한 파이어 폭스는 HTML 수준에서 오버 플로우를 배치합니다.

특별히 다르게 행동하는 스타일하지 않는 한 파이어 폭스는 HTML 수준에서 오버 플로우를 배치합니다.

사용 파이어 폭스에서 작동하도록 얻으려면
```
$('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');
}));
```

2.기능 감지하고 하나의 지원 객체에 애니메이션이 좋은 것입니다,하지만 한 줄 솔루션이 아니다. 한편, 여기에 실행 당 하나의 콜백을 할 약속을 사용하는 방법입니다.

기능 감지하고 하나의 지원 객체에 애니메이션이 좋은 것입니다,하지만 한 줄 솔루션이 아니다. 한편, 여기에 실행 당 하나의 콜백을 할 약속을 사용하는 방법입니다.

$('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();

이제 우리가 애니메이션을 스크롤 페이지의 선택으로 정의하는 VAR를 사용하고, 일반 구문을 사용합니다 :

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

3.나는 왜 내 코드 것없는 일을 해결하려고 노력 연령을 보냈다 -

나는 왜 내 코드 것없는 일을 해결하려고 노력 연령을 보냈다 -
```
$('body,html').animate({scrollTop: 50}, 500);
```
문제는 내 CSS에 있었다 -
```
body { height: 100%};
```
내가 대신 자동으로 설정 (그리고 그것은 처음부터 100 %로 설정 한 이유에 대해 걱정 남아 있었다). 그건 나를 위해 그것을 해결했습니다.
4.당신은 플러그인을 사용하여 문제를 회피 할 수 있습니다 -, 더 구체적으로 내 플러그인을 :)

당신은 플러그인을 사용하여 문제를 회피 할 수 있습니다 -, 더 구체적으로 내 플러그인을 :)

진심으로, 기본적인 문제가되어가 (다른 브라우저 창 스크롤에 대해 서로 다른 요소를 사용) 해결 오랫동안 이후에도 불구하고, 당신을 여행 할 수있는 선을 꽤 적지 않은 문제가 있습니다 :

나는 분명히 바이어스 합니다만, jQuery.scrollable 실제로 이러한 문제를 해결하기위한 좋은 선택입니다. (사실, 나는 그들 모두를 처리하는 다른 플러그인 알고하지 않습니다.)

만약로 스크롤 한 - -이 요지에 getScrollTargetPosition () 함수 방탄 방법 또한 목표 위치를 계산할 수있다.

이는 모두가 당신을 떠날 것이다
```
function scrolear ( destino ) {
    var $window = $( window ),
        targetPosition = getScrollTargetPosition ( $( destino ), $window );

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

    return false;
}
```
5.이주의. 저도 같은 문제가 없었다, 둘 파이어 폭스 또는 탐색기로 스크롤

이주의. 저도 같은 문제가 없었다, 둘 파이어 폭스 또는 탐색기로 스크롤
```
$('body').animate({scrollTop:pos_},1500,function(){do X});
```
다윗이 말한 것처럼 그래서 사용
```
$('body, html').animate({scrollTop:pos_},1500,function(){do X});
```
위대한 그것은 작동하지만, 두 요소, 신체 및 HTML이 있기 때문에 새로운 문제는, 기능이이 두 번 실행 X가 두 번 실행 할 수 있습니다.

단지 'HTML'로 시도하고, 파이어 폭스와 익스플로러 작동하지만 지금 크롬이 지원하지 않습니다.

그래서 파이어 폭스와 익스플로러 HTML을 크롬에 대한 신체가 필요했습니다. 그것은 jQuery를 버그인가? 모른다.

이 두 번 실행하기 때문에 그냥 함수 조심.
6.나는 더 많은 휴대용 솔루션으로 몸도 HTML에 의존하지 않는 것이 좋습니다 것입니다. 그냥 목표는 전체 크기의 스크롤을 가능하게하고 싶은 스크롤 요소와 스타일을 포함하는 본문에 사업부를 추가 :

나는 더 많은 휴대용 솔루션으로 몸도 HTML에 의존하지 않는 것이 좋습니다 것입니다. 그냥 목표는 전체 크기의 스크롤을 가능하게하고 싶은 스크롤 요소와 스타일을 포함하는 본문에 사업부를 추가 :
```
#my-scroll {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
}
```
(즉, 디스플레이를 가정 : 블록 및 상단 : 0; 왼쪽 : 0;하는 목표를 일치 기본값), 다음 애니메이션에 대한 ( '# 내 스크롤을') $를 사용합니다.

7.이것은 실제 거래입니다. 그것은 완벽하게 크롬과 파이어 폭스에서 작동합니다. 그것은 일부 무지한 투표 날 실망도 슬프다. 이 코드는 문자 그대로 모든 브라우저에서 그대로 완벽하게 작동합니다. 당신은 링크를 추가하고 href를 스크롤 할 요소의 ID를 넣어 필요는 아무것도 지정하지 않고 작동합니다. 순수 재사용하고 신뢰할 수있는 코드입니다.

이것은 실제 거래입니다. 그것은 완벽하게 크롬과 파이어 폭스에서 작동합니다. 그것은 일부 무지한 투표 날 실망도 슬프다. 이 코드는 문자 그대로 모든 브라우저에서 그대로 완벽하게 작동합니다. 당신은 링크를 추가하고 href를 스크롤 할 요소의 ID를 넣어 필요는 아무것도 지정하지 않고 작동합니다. 순수 재사용하고 신뢰할 수있는 코드입니다.

$(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 [];
  }
});

8.나는 최근에 같은 문제가 발생하여 나는이 작업을 수행하여 그것을 해결 :

나는 최근에 같은 문제가 발생하여 나는이 작업을 수행하여 그것을 해결 :
```
$ ('html, body'). animate ({scrollTop: $ ('. class_of_div'). offset () .top}, 'fast'});
```
그리고 youpi! 그것은 모든 브라우저에서 작동합니다.

경우에 위치가 정확하지, 당신은이 작업을 수행하여 오프셋 (offset) .top에서 값을 뺄 수 있습니다
```
$ ('html, body'). animate ({scrollTop: $ ('. class_of_div'). offset () .top-desired_value}, 'fast'});
```
9.나에게 문제는 파이어 폭스가 자동으로 나는 URL에 넣어 해시 이름과 동일한 이름 속성을 가진 앵커에 뛰어이었다. 내가 .preventDefault을 넣어 비록 () 것을 방지합니다. 그래서 이름 속성을 변경 한 후, 파이어 폭스는 자동으로 앵커로 이동하지만 애니메이션 권리를 수행하지 않았다.

나에게 문제는 파이어 폭스가 자동으로 나는 URL에 넣어 해시 이름과 동일한 이름 속성을 가진 앵커에 뛰어이었다. 내가 .preventDefault을 넣어 비록 () 것을 방지합니다. 그래서 이름 속성을 변경 한 후, 파이어 폭스는 자동으로 앵커로 이동하지만 애니메이션 권리를 수행하지 않았다.

죄송합니다 @Toni이 이해가 아니었다면. 문제는 내가 www.someurl.com/#hashname 같은 URL에 해시를 변경합니다. 그럼 예를 들어 같은 앵커가 있었다 로 jQuery를 자동으로 스크롤해야한다. 그것은 어떤 스크롤 애니메이션 않고 파이어 폭스에서 일치하는 이름의 속성을 가진 앵커에 바로 뛰어 때문에 그러나 그것은하지 않았다. 내가 이름 = "hashname 앵커"에, 예를 들어, 해시 이름에서 뭔가 다른에 이름 속성을 변경하면,이 일 스크롤이.
10.나를 위해, 그것은 애니메이션의 시점에서 ID를 추가 회피했다 :

나를 위해, 그것은 애니메이션의 시점에서 ID를 추가 회피했다 :

방지 :
```
 scrollTop: $('#' + id).offset().top
```
미리 ID를 준비하고 대신이 일을 :
```
 scrollTop: $(id).offset().top
```
FF에서 수정. (CSS를 추가 나를 위해 차이를하지 않았다)

11.

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

이 작품을 바랍니다.

from https://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] JQuery와 $ 실제로 무엇을 반환합니까? (0)	2020.10.07
[JQUERY] "가져가"어떻게 CSS를 활성화 순수 자바 스크립트에 마우스 오버를 시뮬레이션 할 수 있습니까? (0)	2020.10.07
[JQUERY] jQuery를 DatePicker에서 onchange를 이벤트 문제 (0)	2020.10.07
[JQUERY] jQuery를 객체와 DOM 소자 (0)	2020.10.07
[JQUERY] innerText와에 의해 요소를 얻는 방법 (0)	2020.10.07

복붙노트

[JQUERY] 애니메이션 scrollTop 파이어 폭스에서 작동하지

애니메이션 scrollTop 파이어 폭스에서 작동하지

해결법

1.특별히 다르게 행동하는 스타일하지 않는 한 파이어 폭스는 HTML 수준에서 오버 플로우를 배치합니다.

2.기능 감지하고 하나의 지원 객체에 애니메이션이 좋은 것입니다,하지만 한 줄 솔루션이 아니다. 한편, 여기에 실행 당 하나의 콜백을 할 약속을 사용하는 방법입니다.

3.나는 왜 내 코드 것없는 일을 해결하려고 노력 연령을 보냈다 -

4.당신은 플러그인을 사용하여 문제를 회피 할 수 있습니다 -, 더 구체적으로 내 플러그인을 :)

5.이주의. 저도 같은 문제가 없었다, 둘 파이어 폭스 또는 탐색기로 스크롤

6.나는 더 많은 휴대용 솔루션으로 몸도 HTML에 의존하지 않는 것이 좋습니다 것입니다. 그냥 목표는 전체 크기의 스크롤을 가능하게하고 싶은 스크롤 요소와 스타일을 포함하는 본문에 사업부를 추가 :

8.나는 최근에 같은 문제가 발생하여 나는이 작업을 수행하여 그것을 해결 :

10.나를 위해, 그것은 애니메이션의 시점에서 ID를 추가 회피했다 :

11.

'JQUERY' 카테고리의 다른 글

티스토리툴바