2016-04-04 11 views
2

Aranan metin için scrollY pozisyona ihtiyacım var. Vücutta metin nasıl bulunur ve bulunan metnin scrollY konumunu nasıl alırsınız. (Bütün açıktır)Javascript: beden üzerinde aranan metinin scrollY konumunu alınız

<script> 
    function getScrollYPosition(var str){ 
     /* step 1: search str in <body> and found. 
     * step 2: get scrollY position of found str. 
     * step 3: return position. (500) 
     */ 
    } 
</script> 

<body> 
    <p>Hello world</p> /*For example scrollY position is 500*/ 
    <p>...</p> 
    <p>...</p> 
</body> 
+1

Lütfen bazı kodları sağlayın, kod olmadan size yardımcı olmak zordur! – Gacci

+0

Vurgulanan metnin tarayıcı tarafından aranırken konumunu nasıl bulacağınızı mı sormak istiyorsunuz yoksa özel bir arama yönteminiz var mı? – ShrekOverflow

+0

tarayıcıda arama yapıyor, ancak sadece okunan metnin konumunu kaydırmam gerekiyor – ATES

cevap

1

Önce maç olabilir metin dizesi hızlı bir örnek

var

var word = 'dolor'; 
 
var rgx = new RegExp('\\b('+word+')\\b', 'ig'); 
 

 
// CREATE SPAN ELEMENTS WHAT WILL WRAP THE QUERY STRING (WORD) 
 
$('div, div *').contents().filter(function() { 
 
    return this.nodeType === 3; 
 
}).each(function() { 
 
    $(this).replaceWith($(this).text().replace(rgx, "<span class='match'>$1</span>")); 
 
}); 
 

 
// COLLECT ALL SPAN POSITIONS 
 
var positions = $('.match').map(function(){ 
 
    return this.getBoundingClientRect().top; 
 
}).get(); 
 

 
alert(positions);
div{font-size:50px;} 
 
span.match{background: gold;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatum, provident saepe. Culpa animi sint, itaque iure error hic qui blanditiis perspiciatis adipisci, libero quia veritatis dignissimos quasi id cumque!</div> 
 
<div>Magni cupiditate laudantium, corrupti commodi, reiciendis consequuntur recusandae minima tempore id placeat rerum saepe molestiae, nulla illo, dolores distinctio aliquid asperiores esse maxime voluptatibus corporis at. Commodi eius magni esse!</div> 
 
<div>Maiores explicabo, dolor nemo mollitia cumque et nobis quae consectetur alias dicta quod facere saepe aspernatur sint ex soluta nulla veritatis ab. Sunt aspernatur distinctio quam alias quis possimus reiciendis impedit.</div> 
 
<div>Est sequi eius nam, odio ut commodi quam omnis aperiam, vel, sunt quaerat adipisci voluptates natus possimus consequuntur corporis atque facere corrupti, rem autem modi ipsam inventore nobis! Itaque, modi?</div> 
 
<div>Velit, cumque in dicta ratione iste autem, atque dolor magni optio, excepturi qui ipsam laboriosam modi quidem cupiditate sapiente perferendis! Iste eos fuga ut eum deserunt repellendus ex qui, illo eaque!</div> 
 
<div>Ullam a, labore aperiam ex culpa nesciunt ipsam voluptatibus maiores consequatur qui repellendus obcaecati tenetur, consectetur eos, ut voluptate, nemo placeat soluta odit? Error, Dolor, voluptatibus! Id sed alias et consectetur.</div> 
 
<div>Ipsa pariatur tenetur, nobis recusandae deserunt quisquam nesciunt, ex consequuntur minus voluptatem dolores officiis itaque fuga reiciendis dolor praesentium quae maxime repudiandae. Quibusdam sint fugit soluta pariatur, alias, eveniet natus culpa!</div>

+0

Bir örnek verebilir misiniz? – ATES

+0

@ATES burada git! Elde edilen dizi istenen kelimenin tüm pozisyonlarını gösterir. –

+0

çok açık, harika çok teşekkür ederim. – ATES

1

Biraz daha spesifik Cevabınız ile olabilir :

ardından kod soru hakkında bir örnektir. Doğru bir şekilde anlarsam, verilen bir metni içeren ve dikey ofsetini elde eden bir öğe bulmanız gerekir. Aşağıdaki deneyebilirsiniz:
bir (span) eleman
içine sarın ve bu eleman ofset pozisyonunu İşte

hesaplamak yerine,

$($(":contains(YOUR_TEXT)").slice(-1)[0]).offset().top 
+0

, belirli bir metin o elemanın en alt kısmında konumlandırılmış olsa bile, bir metin içeren bir öğenin konumunu verecektir ... Q'dan net olarak değil, tam olarak OP'nin arzusu ... –

İlgili konular