স্ক্রোলইন্টোভিউ () এর ফলে পুরো পৃষ্ঠাটি সরানো হবে

Question

আমি তালিকাতে হাইলাইট করা আইটেমটি দেখার জন্য স্ক্রোলইন্টোভিউ () ব্যবহার করছি। আমি যখন নীচের দিকে স্ক্রোল করি তখন স্ক্রোলইন্টোভিউ (মিথ্যা) পুরোপুরি কাজ করে। তবে যখন আমি উপরের দিকে স্ক্রোল করি তখন স্ক্রোলইন্টোভিউ (সত্য) পুরো পৃষ্ঠাটিকে কিছুটা সরিয়ে নিয়েছে যা আমি মনে করি যা উদ্দেশ্য। স্ক্রোলইন্টোভিউ (সত্য) ব্যবহার করার সময় পুরো পৃষ্ঠাটি সরানোর কোনও উপায় আছে কি?

এখানে আমার পৃষ্ঠার গঠন -

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

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

listOfDivs আজ্যাক্স কল থেকে আসছে। মোবাইল সাফারি ব্যবহার করছেন।

আগাম আপনার সহায়তার জন্য ধন্যবাদ!

Comments

আপনি কি জেএসফিডেল সরবরাহ করতে পারেন যাতে আমরা সমস্যাটি ঠিক কী তা দেখতে পারি?

— রবার্ট কোরিটনিক

Answer 1

আপনি এর scrollTopপরিবর্তে ব্যবহার করতে পারেন scrollIntoView():

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

জেএসফিডাল: http://jsfiddle.net/LEqjm/

আপনি যদি স্ক্রোল করতে চান এমন একাধিক উপাদান যদি স্ক্রোল করতে চান তবে আপনাকে হস্তক্ষেপকারী উপাদানগুলির scrollTopউপর ভিত্তি করে স্বতন্ত্রভাবে প্রতিটিের পরিবর্তন করতে হবে offsetTop। আপনার যে সমস্যা হচ্ছে তা এড়াতে এটি আপনাকে সূক্ষ্ম কন্ট্রোল দেওয়া উচিত।

সম্পাদনা: অফসেটটপ প্রয়োজনীয়ভাবে পিতামণ্ডলের সাথে সম্পর্কিত নয় - এটি প্রথম অবস্থিত পূর্বপুরুষের সাথে সম্পর্কিত relative যদি অভিভাবক উপাদানটি অবস্থান না করে (আপেক্ষিক, নিখুঁত বা স্থির) থাকে তবে আপনার দ্বিতীয় লাইনটি এতে পরিবর্তন করতে হবে:

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

Comments

এফওয়াইআই, এটি কেবল তখনই কাজ করে যখন পিতামাতার পৃষ্ঠার শীর্ষে থাকে। আপনার সম্ভবত এটি করা উচিতtarget.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop

— ফিল

অফসেটটপটি নিকটস্থ অবস্থানযুক্ত পিতামাতার সাথে সম্পর্কিত, সুতরাং প্যারেন্ট নোড যদি থাকে position: relativeতবে আপনার অফসেটটি বিয়োগ করা উচিত নয়। তবে আপনি বেশিরভাগ ক্ষেত্রেই সঠিক।

— ব্রিলিয়ানড

এখানে একটি জেএস ফ্রিডল রয়েছে : jsfiddle.net/LEqjm/258 যা স্ক্রোলইন্টোভিউতেও অনুচিত আচরণ দেখায়।

— রাফি

@ ব্রিলিয়ান্ড position: relativeপ্রেন্ট ডিভি সম্পর্কে ধারণাটির জন্য আপনাকে ধন্যবাদ জানায়: এটি সত্যিই সমস্যাটি ঠিক করে

— অ্যালেক্স

এটি ক্রোমে কাজ করছে তবে এটি IE তে আরও কিছুটা স্ক্রোল করে, যা উপরে থেকে পাঠ্য সামগ্রীকে গোপন করে। @ ফিল, যে কোনও সমাধান, আগাম ধন্যবাদ

— সোনিয়া

Answer 2

এটি দিয়ে স্থির:

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

দেখুন: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Comments

ধন্যবাদ এটি কাজ করেছে। আমি ব্লকটির ব্যবহার বুঝতে ব্যর্থ হয়েছি এবং আমি যখন এটি পড়ি তখন এর মান হয়। এখন যেহেতু এটি একটি সমস্যার সমাধান করেছে আমি জানি এটি কী করছে

— পাভান

"নিকটতম" এর অর্থ কী? সম্পাদনা: এখানে একটি উত্তর

— সামি

এটি আমার সমস্যা সমাধান করেছে। আমি আমাদের ওয়েব অ্যাপ্লিকেশনটিতে এটি কিছু সময়ের জন্য দেখছি, তবে এটির জন্য রেপ্রোটি লক করা খুব কঠিন। একটি নতুন বৈশিষ্ট্য যুক্ত করার পরে এটি প্রতিবারই ঘটেছিল এবং আমি এই কলটিতে এটি সনাক্ত করতে সক্ষম হয়েছি, যা পরম অনুপস্থিত ছিল block : 'nearest'।

— রসকেল্ড

যদি কেবলমাত্র তারা ব্লক মানগুলি মানে কি তা নির্ধারণ করে .... শুরু এবং নিকটতম ... এটির সমস্ত পরীক্ষা এবং ত্রুটি।

— বায়ে

ক্রোমের সাথে কাজ করে তবে আমার পক্ষে এজের সাথে নয়।

— মাইকেল 15 ই

Answer 3

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

Comments

বা আপনি ব্যবহার করতে পারেনtop: el['offsetTop']

— জুনিয়র মেহে

এটি আমার পক্ষে সবচেয়ে ভাল কাজ করে। তবে এখনও ফায়ার ফক্সে কিছুটা বগি - কখনও কখনও এটি উপাদানটির আংশিক পথ বন্ধ করে দেয়। প্রান্ত এবং ক্রোম উপর সূক্ষ্ম।

— মার্ক

Answer 4

আমারও এই সমস্যা ছিল, এবং এটি মোকাবেলা করার জন্য অনেক ঘন্টা ব্যয় করেছি। আমি আশা করি আমার রেজোলিউশনটি এখনও কিছু লোককে সহায়তা করতে পারে।

আমার ফিক্সটি শেষ হয়েছে:

• ক্রোম এর জন্য: পরিবর্তন .scrollIntoView()করতে .scrollIntoView({block: 'nearest'})(ধন্যবাদ @jfrohn করার জন্য)।
• ফায়ারফক্সের জন্য: overflow: -moz-hidden-unscrollable;বদলে যাওয়া ধারক উপাদানটিতে প্রয়োগ করুন।
• অন্যান্য ব্রাউজারে পরীক্ষিত নয়।

Answer 5

এর সাথে চারদিকে খেলুন scrollIntoViewIfNeeded()... এটি ব্রাউজার দ্বারা সমর্থিত তা নিশ্চিত করুন।

Comments

জানতেন না যে এটি একটি জিনিস ছিল। আছে একটি polyfill

— mpen

দস্তাবেজে, এটিতে এটি উল্লেখ করা হয়েছে যে এটি মানক নয় তবে এটি ঠিকঠাক কাজ করছে। আমাদের এটি ব্যবহার করা উচিত?

— শ্যাম কুমার

Answer 6

আমি স্ক্রোলইন্টোভিউয়ের অনর্থক আচরণ প্রদর্শন করার জন্য একটি উপায় যুক্ত করেছি - 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);
}
});

Comments

একটি jQuery প্রশ্ন নয়।

— সীগেটগুলি

Answer 7

jQuery প্লাগইন scrollintoview()ব্যবহারযোগ্যতা বৃদ্ধি করে

ডিফল্ট ডিওএম প্রয়োগের পরিবর্তে আপনি এমন একটি প্লাগইন ব্যবহার করতে পারেন যা চলাচলকে অ্যানিমেট করে এবং এতে কোনও অযাচিত প্রভাব থাকে না। এটি ডিফল্ট সহ ব্যবহার করার সহজ উপায়:

$("yourTargetLiSelector").scrollintoview();

যাইহোক এই ব্লগ পোস্টে চলে আসুন যেখানে আপনি সমস্ত বিবরণ পড়তে পারেন এবং শেষ পর্যন্ত আপনাকে প্লাগইনের গিটহাব উত্স কোডে পাবেন ।

এই প্লাগইনটি স্বয়ংক্রিয়ভাবে নিকটস্থ স্ক্রোলযোগ্য পূর্বপুরুষ উপাদান অনুসন্ধান করে এবং এটি স্ক্রোল করে যাতে নির্বাচিত উপাদানটি তার দৃশ্যমান দর্শন বন্দরের ভিতরে থাকে। উপাদানটি ইতিমধ্যে ভিউ পোর্টে থাকলে এটি অবশ্যই কিছু করে না।

Comments

@ ব্রিলিয়ান্ড: এটি অবশ্যই সত্য, তবে এর অর্থ এই নয় যে তারা এটি ব্যবহার করছে না বা এটি ব্যবহার করতে নারাজ। আমি যা করছি তা একটি বিকল্প সরবরাহ করছে। তারা কোনও পথ নেবে কি না সে বিষয়ে সিদ্ধান্ত নিতে এটি ওপিতে রয়েছে। সম্ভবত তারা প্রথম স্থানে jQuery ব্যবহার বিবেচনা করেনি।

— রবার্ট কোরিটনিক

ওপি বিশেষত jQuery উল্লেখ করেনি সম্পূর্ণ অপ্রাসঙ্গিক: @ রবার্টকোরিটনিকের উত্তরটি আমাকে পুরোপুরি উপভোগ করেছে served

— ডেভ ল্যান্ড

ঘটনাক্রমে, বিং আপনার কোডের নমুনাটি অনুসন্ধানের ফলাফলগুলিতে "স্ক্রোলিনটোভিউ দিয়ে স্ক্রোলিং থেকে পূর্বপুরুষ উপাদানকে রাখুন" দেখায়। :-)

— ডেভ ল্যান্ড

Answer 8

ব্রিলিয়ান্টের ধারণাটি ব্যবহার করে, এখানে একটি সমাধান রয়েছে যা উপাদানটি বর্তমানে দৃশ্যমান না হলে কেবল (উল্লম্বভাবে) স্ক্রোল করে। ব্রাউজার-উইন্ডো স্থানাঙ্ক স্থানে ভিউপোর্টের সীমানা বাক্স এবং এলিমেন্টটি প্রদর্শিত হবে তা ধারণা। এটি দৃশ্যমান কিনা এবং তা না পরীক্ষা করে দেখুন, প্রয়োজনীয় দূরত্ব দিয়ে স্ক্রোল করুন যাতে ভিউপোর্টের উপরে বা নীচে উপাদানটি প্রদর্শিত হয়।

    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;
        }
    }

Answer 9

@Jescoপোস্টে আরও তথ্য যুক্ত করা হচ্ছে ।

• Element.scrollIntoViewIfNeeded() non-standard WebKit methodক্রোম, অপেরা, সাফারি ব্রাউজারগুলির জন্য।
  যদি উপাদানটি ইতিমধ্যে ব্রাউজার উইন্ডোটির দৃশ্যমান অঞ্চলের মধ্যে থাকে তবে কোনও স্ক্রোলিং হয় না ।
• 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);
    }
}

Answer 10

আমার প্রসঙ্গে, তিনি চটচটে সরঞ্জামদণ্ডটি পর্দার বাইরে ধাক্কা দিতেন বা পরম দিয়ে একটি ফ্যাব বোতামের পাশে প্রবেশ করতেন।

সর্বাধিক সমাধান করা ব্যবহার।

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

Answer 11

আমারও একই সমস্যা ছিল, আমি পৃষ্ঠার transform:translateYউপরে যে সিএসএস রেখেছি তা সরিয়ে এটি ঠিক করেছি footer।