অ্যানিমেট স্ক্রোলটপ ফায়ারফক্সে কাজ করছে না

Question

এই ফাংশনটি সূক্ষ্মভাবে কাজ করে। এটি কোনও পছন্দসই ধারকটির অফসেটে দেহটি স্ক্রোল করে

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

তবে ফায়ারফক্সে নেই। কেন?

-EDIT-

গৃহীত উত্তরে ডি ডাবল ট্রিগার পরিচালনা করতে, আমি অ্যানিমেশনের আগে উপাদানটি বন্ধ করার পরামর্শ দিই:

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

Comments

আপনার চূড়ান্ত কোডটি এখানে সমস্ত স্টাফের মধ্যে সবচেয়ে মার্জিত।

— টিকটিকি

Answer 1

ফায়ারফক্স স্তরটিতে ওভারফ্লো স্থাপন করে html, যদি না আলাদাভাবে আচরণের জন্য বিশেষভাবে স্টাইল করা হয়।

এটি ফায়ারফক্সে কাজ করতে, ব্যবহার করুন

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

কাজের উদাহরণ

সিএসএস সমাধানটি নিম্নলিখিত স্টাইলগুলি সেট করা হবে:

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

আমি ধরে নেব যে জেএস সমাধানটি কমপক্ষে আক্রমণাত্মক হবে।

---

হালনাগাদ

নীচের অনেকগুলি আলোচনার বিষয়টিকে কেন্দ্র করে যে 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');
}));

Comments

জেএস সলিউশনের একটি ত্রুটি আছে! এইচটিএমএল উপাদান এবং শরীরের উপাদানগুলির জন্য যথাক্রমে দুটি বার অ্যানিমেট কার্য সম্পাদন করা হয়। দেখে মনে হচ্ছে ওয়েবকিট ব্রাউজারগুলি শরীর ব্যবহার করে এবং বাকিরা এইচটিএমএল ব্যবহার করে । এই $(jQuery.browser.webkit ? "body": "html").animate(...);

— ফিক্সটি

আমি দেখতে পেয়েছি যে অ্যান্ড্রেইকোর কাছ থেকে সমাধান jQuery <1.4 এ ব্যবহার করা হয়নি যা আমি ব্যবহার করছিলাম। আমি ভালো এটা ঠিক করতে সক্ষম হন: $(jQuery.browser.mozilla ? "html" : "body").animate(...);। ব্রাউজ স্নিফিং ব্যবহার না করা দুর্দান্ত হবে তবে বৈশিষ্ট্য সনাক্তকরণ।

— সিএসএসে

দ্রষ্টব্য, jQuery.browserসর্বশেষ jQuery সংস্করণ থেকে

— অবহিত

4 বছর পরে, এবং এই উত্তরটি এখনও কার্যকর প্রমাণিত হচ্ছে। অনেক ধন্যবাদ!

— ম্যাট

@ ড্যামফা: মূলত, কারণ window.scrollপ্রাণবন্ত নয়। আপনি অবশ্যই বিরতি দিয়ে নিজের জিনিসটি রোল করতে পারেন এবং scrollBy। আপনি যদি এতে স্বাচ্ছন্দ্য যোগ করতে চান তবে হঠাৎ আপনার পণ্যের একটি ছোটখাটো দিক লিখতে আপনার কাছে প্রচুর কোড রয়েছে।

— ডেভিড হেডলুন্ড

Answer 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();

এখন পৃষ্ঠাটি স্ক্রোলিং অ্যানিমেশনের জন্য নির্বাচক হিসাবে আমরা কেবল যে সংজ্ঞাটি দিয়েছি তা ব্যবহার করুন এবং নিয়মিত বাক্য গঠনটি ব্যবহার করুন:

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

Comments

সাধারণ পরিস্থিতিতে দুর্দান্ত কাজ করে, ধন্যবাদ! যদিও সচেতন হওয়ার জন্য কয়েকটি গোটাচা রয়েছে। (1) বৈশিষ্ট্য পরীক্ষা চলাকালীন শরীরে যদি উইন্ডো উপচে পড়ার মতো পর্যাপ্ত পরিমাণ না থাকে তবে উইন্ডোটি স্ক্রোল করবে না এবং পরীক্ষায় একটি বোগাস "বডি" ফলাফল প্রদান করবে। (২) আইওএসে যদি কোনও আইফ্রেমের অভ্যন্তরে পরীক্ষাটি চালিত হয় তবে এটি একই কারণে ব্যর্থ হয়। আইওএসের আইফ্রেমগুলি লম্বালম্বিভাবে প্রসারিত হয় (অনুভূমিকভাবে নয়) যতক্ষণ না কন্ট্রোলটি লিখিতভাবে ভিতরে fitsুকে যায়। (3) পরীক্ষাটি মূল উইন্ডোতে সম্পাদিত হওয়ার কারণে এটি ইতিমধ্যে স্থানে থাকা স্ক্রোল হ্যান্ডলারগুলিকে ট্রিগার করে। ... (অব্যাহত)

— হ্যাশচেঞ্জ

... এই কারণগুলির জন্য, একটি বুলেটপ্রুফ পরীক্ষার জন্য একটি উত্সর্গীকৃত iframe (সলভস (3)) এর মধ্যে যথেষ্ট পরিমাণে পর্যাপ্ত সামগ্রী (সলভস (1)) এর অভ্যন্তরে চলতে হবে যা অনুভূমিক স্ক্রোল (সলভস (2)) এর জন্য পরীক্ষা করা হয়।

— হ্যাশচেঞ্জ

এটি ধারাবাহিক ফলাফল দেওয়ার জন্য আমাকে আসলে একটি টাইমআউট স্ক্রিপ্টে এই ফাংশনটি চালাতে হয়েছিল, অন্যথায় মনে হয় এটি কখনও কখনও ফিরে আসে htmlএবং কখনও কখনও ফিরে আসে body। ফাংশনটি ঘোষণার পরে আমার কোড এখানে রয়েছে এর var scrollTopElement; setTimeout( function() { scrollTopElement = getScrollTopElement(); console.log(scrollTopElement); }, 1000); জন্য আপনাকে ধন্যবাদ যদিও এটি আমার সমস্যার সমাধান করেছে।

— টনি এম

কিছু মনে করবেন না, আমি বুঝতে পারলাম আসল সমস্যাটি কী। আপনি যদি পুনরায় লোড করার সময় ইতিমধ্যে পৃষ্ঠার নীচে থাকেন (f5), এই স্ক্রিপ্টটি অনুমিত htmlহওয়ার পরিবর্তে ফিরে আসবে body। এটি কেবলমাত্র যদি আপনি ওয়েবপৃষ্ঠায় সমস্তভাবে স্ক্রল করে থাকেন এবং আপনি পুনরায় লোড করেন, অন্যথায় এটি কাজ করে না।

— টনি এম

পৃষ্ঠাটি নীচে খোলে কিনা তার জন্য আমি একটি চেক যোগ করার পরে এটি আমার পক্ষে কাজ করেছে।

— স্কট 19

Answer 3

আমার কোড কেন কাজ করে না তা চেষ্টা করার জন্য আমি যুগে যুগে কাটিয়েছি -

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

সমস্যাটি আমার সিএসএসে ছিল -

body { height: 100%};

আমি এটির autoপরিবর্তে সেট করেছিলাম (এবং কেন এটি 100%প্রথম স্থানে সেট করা হয়েছিল তা নিয়ে উদ্বিগ্ন হয়ে পড়েছিলাম )। এটা আমার জন্য এটি স্থির।

Answer 4

আপনি সম্ভবত একটি প্লাগইন ব্যবহার করে সমস্যাটি ডজ করতে চাইতে পারেন - আরও বিশেষভাবে, আমার প্লাগইন :)

গুরুতরভাবে, যদিও মূল সমস্যাটি দীর্ঘকাল ধরে সম্বোধন করা হয়েছে (বিভিন্ন ব্রাউজারগুলি উইন্ডো স্ক্রোলিংয়ের জন্য বিভিন্ন উপাদান ব্যবহার করে), লাইনটিতে বেশ কয়েকটি অ-তুচ্ছ সমস্যা রয়েছে যা আপনাকে ট্রিপ করতে পারে:

• কেবল দুটোকেই অ্যানিমেট করা bodyএবং html এর সমস্যাগুলি রয়েছে ,
• প্রকৃত ব্রাউজারের আচরণটি সঠিকভাবে পরীক্ষা করা সঠিক হয়ে উঠছে ( @ স্টিফেনের উত্তরে আমার মন্তব্য দেখুন ),
• তবে সবচেয়ে বড় কথা, ব্যবহারযোগ্যতার পুরো সমস্যা রয়েছে যা আপনি একটি শালীন ব্যবহারকারীর অভিজ্ঞতার জন্য মোকাবেলা করতে চান।

আমি স্পষ্টতই পক্ষপাতদুষ্ট, তবে jQuery.scrollable এই সমস্যাগুলি সমাধান করার জন্য আসলে একটি ভাল পছন্দ। (আসলে, আমি অন্য কোনও প্লাগইন জানি না যা এগুলি সমস্ত পরিচালনা করে)

এক যা আপনাকে স্ক্রল - - সঙ্গে একটি বুলেট-প্রমাণ ভাবে উপরন্তু, আপনি লক্ষ্য অবস্থান নিরূপণ করতে পারেন এই সারকথা ফাংশন ।getScrollTargetPosition()

যা সব আপনাকে ছেড়ে চলে যাবে

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

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

    return false;
}

Answer 5

এ থেকে সাবধান থাকুন। আমার একই সমস্যা ছিল, ফায়ারফক্স বা এক্সপ্লোরার দুটিও স্ক্রল করে না

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

তাই আমি ডেভিডের মতো বলেছি

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

দুর্দান্ত এটি কাজ করেছে, তবে নতুন সমস্যা, যেহেতু দুটি উপাদান, শরীর এবং এইচটিএমএল রয়েছে তাই ফাংশন দু'বার কার্যকর করা হয়, এটি এক্স দুইবার চালায়।

শুধুমাত্র 'এইচটিএমএল', এবং ফায়ারফক্স এবং এক্সপ্লোরার কাজের সাহায্যে চেষ্টা করেছেন, কিন্তু এখন ক্রোম এটি সমর্থন করে না।

ক্রোমের জন্য প্রয়োজনীয় শরীর, এবং ফায়ারফক্স এবং এক্সপ্লোরারের জন্য এইচটিএমএল দরকার। এটি কি jQuery বাগ? জানি না

আপনার ফাংশনটি সম্পর্কে সচেতন হোন, যেহেতু এটি দুটিবার চলবে।

Comments

আপনি কি এর জন্য কোনও কাজের সন্ধান পেয়েছেন? এবং যেহেতু jquery ব্রাউজার সনাক্তকরণ অবচয় করা হয়েছে, তাই আমি জানি না যে আমি ক্রোম এবং ফায়ারফক্সের মধ্যে পার্থক্য করার জন্য বৈশিষ্ট্য সনাক্তকরণ কীভাবে ব্যবহার করতে পারি। তাদের ডকুমেন্টেশন এমন কোনও বৈশিষ্ট্য নির্দিষ্ট করে না যা ক্রোমে উপস্থিত রয়েছে এবং ফায়ারফক্স বা বিপরীতে নেই। :(

— মনদীপ জৈন

.স্টপ (সত্য, সত্য) .নিমেট সম্পর্কে কি?

— টনি মিশেল কাবেট

Answer 6

আমি সুপারিশ করবে না জানানোর bodyকিংবা htmlআরো একটি পোর্টেবল সমাধান হিসেবে। কেবল শরীরে এমন একটি ডিভ যুক্ত করুন যা স্ক্রোলড উপাদানগুলি ধারণ করে এবং স্টাইলটি পূর্ণ আকারের স্ক্রোলিং সক্ষম করতে পছন্দ করে:

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

(ধরে নিই display:block;এবং top:0;left:0;এটি আপনার লক্ষ্যের সাথে মেলে এমন ডিফল্ট), তারপরে $('#my-scroll')আপনার অ্যানিমেশনগুলির জন্য ব্যবহার করুন।

Answer 7

এই বাস্তব চুক্তি। এটি নির্বিঘ্নে ক্রোম এবং ফায়ারফক্সে কাজ করে। এমনকি দুঃখজনক যে কিছু অজ্ঞ মানুষ আমাকে ভোট দিয়েছেন। এই কোডটি আক্ষরিকভাবে পুরোপুরি কাজ করে যা সমস্ত ব্রাউজারে রয়েছে। আপনাকে কেবল একটি লিঙ্ক যুক্ত করতে হবে এবং উপাদানটির আইডিটি আপনি 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 [];
  }
});

Comments

এটি জটিল হতে পারে তবে এটি সত্যই কার্যকর। এটি মূলত সমস্ত ব্রাউজারে প্লাগ-এন-প্লে কাজ করে। একটি সহজ সমাধান আপনাকে এটি করতে দেয় না।

— দ্রজোরেজপোল্যাঙ্কো 10'15

Answer 8

আমি সম্প্রতি সম্প্রতি একই সমস্যার মুখোমুখি হয়েছি এবং এটি করে এটি সমাধান করেছি:

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

আর ইউপি !!! এটি সমস্ত ব্রাউজারে কাজ করে।

পজিশনিং সঠিক না হলে আপনি এটি করে অফসেট () .টপ থেকে কোনও মান বিয়োগ করতে পারেন

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

Comments

এই সমাধানটি ইতিমধ্যে বিদ্যমান

— জবাবগুলিতে

এই পদ্ধতিটি এখনও ফায়ারফক্সে একটি জটিলতার মুখোমুখি হয়েছে, যেমনটি আমি সবে পোস্ট করা প্রশ্নে উল্লেখ করা হয়েছে: stackoverflow.com/q/58617731/1056713

— ছায়া কুপার

Answer 9

আমার জন্য সমস্যাটি হ'ল ফায়ারফক্স স্বয়ংক্রিয়ভাবে নামটি-এ্যাট্রিবিউটের সাথে অ্যাঙ্কারে ঝাঁপিয়ে পড়েছিল যেটি আমি ইউআরএলে রেখেছি। যদিও আমি তা রোধ করতে .প্রিভেন্টডিফল্ট () রেখেছি। নামটির বৈশিষ্ট্যগুলি পরিবর্তনের পরে, ফায়ারফক্স স্বয়ংক্রিয়ভাবে অ্যাঙ্করগুলিতে লাফিয়ে উঠেনি, তবে ডানদিকে অ্যানিমেশনটি সম্পাদন করবে।

@ টনি দুঃখিত, এটি বুঝতে না পারলে দুঃখিত। জিনিসটি হ'ল আমি www.someurl.com/#hashname এর মতো ইউআরএলটিতে হ্যাশগুলি পরিবর্তন করেছি। তারপরে আমার কাছে উদাহরণস্বরূপ একটি অ্যাঙ্কর ছিল <a name="hashname" ...></a>যা jQuery স্বয়ংক্রিয়ভাবে স্ক্রোল করা উচিত। তবে এটি হয়নি কারণ এটি কোনও স্ক্রোল অ্যানিমেশন ছাড়াই ফায়ারফক্সে ম্যাচিং নাম অ্যাট্রিবিউটের সাথে ডানদিকে অ্যাঙ্কারে গিয়েছিল। একবার আমি নামটির বৈশিষ্ট্যটি হ্যাশের নাম থেকে আলাদা কিছুতে পরিবর্তন করেছি, উদাহরণস্বরূপ name="hashname-anchor", স্ক্রোলিং কাজ করেছে।

Answer 10

আমার জন্য, এটি অ্যানিমেশন পয়েন্টে আইডি যুক্ত করা এড়ানো ছিল:

এড়ানো:

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

আগে থেকে আইডি প্রস্তুত করা এবং পরিবর্তে এটি করা:

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

এফএফ স্থির। (সিএসএস সংযোজনগুলি আমার পক্ষে কোনও তাত্পর্যপূর্ণ করেনি)

Answer 11

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

আশা করি এটি কাজ করে।

Comments

কীভাবে সেটটাইমুট এখানে সহায়তা করে?

— টনি মিশেল কাওবেট

@ টনিমিচেলকোবেট সম্ভবত অ্যানিমেশন অ্যাসিক্রোনাস করা লক্ষ্য। jQuery অ্যানিমেশনগুলি ইতিমধ্যে অবিচ্ছিন্ন, যদিও এটি কিছুই অর্জন করে না।

— mwcz

সমস্যার কোনও চিন্তাশীল উত্তর নয়। এটি কী অর্জন করবে তা নিশ্চিত নয়।

— এরিয়ার