स्क्रॉल इनटू व्यू () पूरे पृष्ठ को स्थानांतरित करने का कारण बनता है

110

मैं सूची में हाइलाइट किए गए आइटम को स्क्रॉल करने के लिए स्क्रॉल इनटू व्यू () का उपयोग कर रहा हूं। जब मैं नीचे की ओर स्क्रॉल करता हूं तो स्क्रॉल इनटू व्यू (झूठा) पूरी तरह से काम करता है। लेकिन जब मैं ऊपर की ओर स्क्रॉल करता हूं, तो स्क्रॉल इनटू व्यू (सच) पूरे पृष्ठ को थोड़ा स्थानांतरित करने का कारण बनता है जो मुझे लगता है कि इरादा है। क्या स्क्रॉल इनटू व्यू (सत्य) का उपयोग करते समय पूरे पृष्ठ से बचने का कोई तरीका है?

यहाँ मेरे पृष्ठ की संरचना है -

#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 अजाक्स कॉल से आ रहा है। मोबाइल सफारी का उपयोग करना।

आपकी सहायता के लिए अग्रिम धन्यवाद!

javascript css

— मैं यहाँ हुं
स्रोत

1

क्या आप एक JSFiddle प्रदान कर सकते हैं ताकि हम देख सकें कि समस्या क्या है?

— रॉबर्ट कोरिटनिक

115

आप scrollTopइसके बजाय उपयोग कर सकते हैं scrollIntoView():

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

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

यदि एक से अधिक स्क्रॉल करने योग्य तत्व हैं जिन्हें आप स्क्रॉल करना चाहते हैं, तो आपको हस्तक्षेप करने वाले तत्वों के scrollTopआधार पर प्रत्येक को अलग-अलग बदलना होगा offsetTop। इससे आपको जो समस्या हो रही है उससे बचने के लिए आपको ठीक-ठाक नियंत्रण देना चाहिए।

संपादित करें: ऑफ़सेट मूल तत्व के सापेक्ष आवश्यक नहीं है - यह पहले तैनात पूर्वज के सापेक्ष है। यदि मूल तत्व पोस्ट नहीं किया गया है (सापेक्ष, पूर्ण या निश्चित), तो आपको दूसरी पंक्ति बदलने की आवश्यकता हो सकती है:

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

— Brilliand
स्रोत

3

FYI करें, यह तभी काम करता है जब अभिभावक पृष्ठ के शीर्ष पर होता है। आपको शायद इसे बनाना चाहिएtarget.parentNode.scrollTop = target.offsetTop - target.parentNode.offsetTop

— फिल

2

ऑफसेटटॉप निकटतम तैनात माता-पिता के सापेक्ष है, इसलिए यदि मूल नोड में है position: relative, तो आपको इसकी भरपाई नहीं करनी चाहिए। लेकिन आप ज्यादातर मामलों के लिए सही हैं।

— ब्रिलियनड

2

यहाँ एक js फ़िडेल है : jsfiddle.net/LEqjm/258 जो स्क्रॉल इनटू व्यू अनुचित व्यवहार को भी दर्शाता है।

— रफी

1

position: relative@ ब्रिलियनड ने प्रेंट डिव के बारे में विचार के लिए धन्यवाद दिया : यह वास्तव में समस्या को ठीक करता है

— एलेक्स

यह क्रोम पर काम कर रहा है, लेकिन यह IE पर थोड़ा अधिक स्क्रॉल करता है, जो शीर्ष से पाठ सामग्री को छुपाता है। कोई समाधान @Phil, अग्रिम धन्यवाद

— सोनिया

123

इसे इसके साथ तय करें:

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

देखें: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

— jfrohn
स्रोत

1

धन्यवाद यह काम किया। मैं ब्लॉक के उपयोग को समझने में विफल रहा और जब मैंने इसे पढ़ा तो यह मूल्य है। अब जब इसने एक समस्या को हल किया तो मुझे पता है कि यह क्या कर रही है

— पावन

3

"निकटतम" का क्या अर्थ है? संपादित करें: यहाँ एक जवाब मिला: stackoverflow.com/a/48635751/628418

— सम्मी

इससे मेरी समस्या हल हो गई। मैं कुछ समय से हमारे वेब ऐप में ऐसा होता देख रहा हूं, लेकिन इसके लिए रेप्रो को लॉक करना मुश्किल हो गया है। एक नई सुविधा जोड़ने के बाद यह हर बार हुआ और मैं इसे इस कॉल को ट्रेस करने में सक्षम था, जो कि block : 'nearest'परम को याद कर रहा था ।

— रस्केल्ड

यदि केवल वे परिभाषित करते हैं कि ब्लॉक वैल्यू का क्या अर्थ है .... प्रारंभ और निकटतम ... इसकी सभी परीक्षण और त्रुटि।

— Bae

क्रोम के साथ काम करता है, लेकिन मेरे लिए एज के साथ नहीं।

— माइकल 18

13

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

— द्विध्रुव आघूर्ण
स्रोत

या आप का उपयोग कर सकते हैंtop: el['offsetTop']

— जूनियर Mayhé

यह मेरे लिए सबसे अच्छा काम करता है। लेकिन अभी भी फ़ायरफ़ॉक्स पर थोड़ी छोटी गाड़ी - कभी-कभी यह तत्व के लिए रास्ता रोक देता है। किनारे और क्रोम पर ठीक है।

— मार्क

9

मुझे यह समस्या भी थी, और इससे निपटने के लिए कई घंटे बिताए। मुझे उम्मीद है कि मेरा संकल्प अभी भी कुछ लोगों की मदद कर सकता है।

मेरा फिक्स समाप्त हो रहा है:

क्रोम के लिए: बदल रहा है .scrollIntoView()करने के लिए .scrollIntoView({block: 'nearest'})(धन्यवाद @jfrohn के लिए)।
फ़ायरफ़ॉक्स के लिए: overflow: -moz-hidden-unscrollable;कंटेनर तत्व पर लागू होता है जो बदलाव करता है।
अन्य ब्राउज़रों में परीक्षण नहीं किया गया।

— paddotk
स्रोत

8

साथ खेलें scrollIntoViewIfNeeded()... सुनिश्चित करें कि यह ब्राउज़र द्वारा समर्थित है।

— Jesco
स्रोत

1

नहीं पता था कि एक बात थी। वहाँ एक polyfill है

— MP47

दस्तावेज़ में, इसका उल्लेख वहाँ है कि यह गैर मानक है लेकिन यह ठीक काम कर रहा है। क्या हमें इसका उपयोग करना चाहिए?

— श्याम कुमार

8

मैंने स्क्रॉल इनटू व्यू के असाध्य व्यवहार को प्रदर्शित करने का एक तरीका जोड़ा है - 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);
}
});

— मिशाल त्सादोक
स्रोत

7

एक jQuery प्रश्न नहीं।

— seangates

6

jQuery प्लगइन `scrollintoview()`प्रयोज्यता बढ़ाता है

डिफ़ॉल्ट डोम कार्यान्वयन के बजाय आप एक प्लगइन का उपयोग कर सकते हैं जो आंदोलन को एनिमेट करता है और इसका कोई अवांछित प्रभाव नहीं है। यहाँ चूक के साथ इसका उपयोग करने का सबसे सरल तरीका है:

$("yourTargetLiSelector").scrollintoview();

वैसे भी इस ब्लॉग पोस्ट पर जाएँ जहाँ आप सभी विवरणों को पढ़ सकते हैं और अंततः आपको प्लगइन के GitHub स्रोत कोड तक ले जाएंगे ।

यह प्लगइन स्वचालित रूप से निकटतम स्क्रॉल करने योग्य पूर्वज तत्व की खोज करता है और इसे स्क्रॉल करता है ताकि चयनित तत्व इसके दृश्यमान पोर्ट के अंदर हो। यदि तत्व पहले से ही दृश्य पोर्ट में है, तो यह निश्चित रूप से कुछ भी नहीं करता है।

— रॉबर्ट कोरिटनिक
स्रोत

19

@ ब्रिलियनड: यह बिल्कुल सच है, लेकिन इसका मतलब यह नहीं है कि वे इसका उपयोग नहीं कर रहे हैं या इसका उपयोग करने के लिए अनिच्छुक हैं। मैं जो कुछ कर रहा हूं वह एक विकल्प प्रदान कर रहा है। यह तय करने के लिए ओपी पर है कि वह एक रास्ता लेगा या नहीं। हो सकता है कि उन्होंने पहले स्थान पर jQuery का उपयोग करने पर कभी विचार नहीं किया।

— रॉबर्ट कोरिटनिक

ओपी ने विशेष रूप से उल्लेख नहीं किया कि jQuery पूरी तरह अप्रासंगिक है: @ RobertKoritnik के उत्तर ने मुझे पूरी तरह से सेवा प्रदान की।

— डेव लैंड

1

संयोग से, बिंग आपके परिणामों के लिए खोज परिणामों में अपने कोड का नमूना दिखा रहा है "स्क्रॉल पूर्व से स्क्रॉल करने से पूर्वज तत्व रखें।" :-)

— डेव लैंड

2

ब्रिलिएंट के विचार का उपयोग करते हुए, यहां एक समाधान है जो केवल (लंबवत) स्क्रॉल करता है यदि तत्व वर्तमान में दिखाई नहीं देता है। विचार व्यूपोर्ट के बाउंडिंग बॉक्स और तत्व को ब्राउज़र-विंडो समन्वित स्थान में प्रदर्शित करने के लिए है। जांचें कि क्या यह दिखाई दे रहा है और यदि नहीं, तो आवश्यक दूरी से स्क्रॉल करें ताकि तत्व व्यूपोर्ट के ऊपर या नीचे दिखाया जाए।

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

— KungPhoo
स्रोत

2

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

— यश
स्रोत

2

मेरे संदर्भ में, वह स्क्रीन से चिपचिपा टूलबार धक्का देगा, या पूर्ण के साथ फैब बटन के बगल में प्रवेश करेगा।

निकटतम हल का उपयोग करना।

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

— गुई सीक
स्रोत

1

मेरे पास एक ही समस्या थी, मैंने इसे पृष्ठ के शीर्ष transform:translateYपर रखे सीएसएस को हटाकर तय किया footer।

— येल काफिर
स्रोत

स्क्रॉल इनटू व्यू () पूरे पृष्ठ को स्थानांतरित करने का कारण बनता है

jQuery प्लगइन scrollintoview()प्रयोज्यता बढ़ाता है

jQuery प्लगइन `scrollintoview()`प्रयोज्यता बढ़ाता है