限制滾動到目標ID

我想弄清楚，如果以下情況是可能的簡單的jQuery或JavaScript，沒有使用插件。限制滾動到目標ID

這是基礎示例代碼：

<div id="section1"> 
    <!-- content here --> 
</div> 
<div id="section2"> 
    <!-- content here --> 
</div> 
<div id="section3"> 
    <!-- content here --> 
</div>

每個部分將填充寬度和高度的視口。我想實現的是，無論滾動長度如何，觀看者向下滾動或向上滾動，都可以簡單地轉換到下一部分。我不希望那裏有典型的滾動，只能轉換到下一個或上一個部分。

我知道我可以很容易地用這個按鈕，並且希望將其擴展爲滾動。我前幾天正在查看一個很好的例子，但我不能爲了我的生活找到那個頁面。

我曾想過使用一個變量來存儲查看器當前所在的部分，並根據方向循環，但我不確定這是否是最好的方法，甚至不知道如何開始。

請讓我知道，如果我已經清楚地解釋了這個概念。我非常感謝這方面的任何想法。

謝謝！

來源

2015-12-15 Krillzoo

是否必須是一個滾動條？你可以用[滑塊]（https://jqueryui.com/slider/#steps）做到這一點，然後隱藏/顯示活動部分。 – Jasen

有趣。不，不必有滾動條。我會看看這個。謝謝！ – Krillzoo

使用簡單的JS？不可以。因爲這種交互類型需要視口功能來檢查哪些元素存在於視口中，哪些元素部分在視圖中，最好使用考慮所有用戶交互，邊緣情況和選項的簡單插件。爲此，許多插件已被社區徹底調試。

如果您想從某個地方開始對知識的目的，這樣的理念，我在一個的jsfiddle下面重點介紹的步驟，讓你開始：

的jsfiddle http://jsfiddle.net/3nb0mwoe/13/

HTML

<section id="section1"> 

</section> 
<section id="section2"> 

</section> 
<section id="section3"> 

</section>

CSS

section { 
    height: 100%; 
} 

#section1 { 
    background-color: red; 
} 

#section2 { 
    background-color: blue; 
}

/* helpers */ 

// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport 
function isElementInViewport (el) { 

    //special bonus for those using jQuery 
    if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
    } 

    var rect = el.getBoundingClientRect(); 

    return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom - 25 <= (window.innerHeight || document.documentElement.clientHeight) && 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) 
    ); 
} 

function anyOfElementInViewport(el) { 
    var top = el.offsetTop; 
    var left = el.offsetLeft; 
    var width = el.offsetWidth; 
    var height = el.offsetHeight; 

    while(el.offsetParent) { 
    el = el.offsetParent; 
    top += el.offsetTop; 
    left += el.offsetLeft; 
    } 

    return (
    top < (window.pageYOffset + window.innerHeight) && 
    left < (window.pageXOffset + window.innerWidth) && 
    (top + height) > window.pageYOffset && 
    (left + width) > window.pageXOffset 
); 
} 

/* START */ 
// step 1: get all sections and set viewport height for consistency 
var $sections = $('section'); 
$sections.css('height', window.innerHeight); 

// step 2: get current section 
var $currSection = $.grep($sections, function($s) { 
    return isElementInViewport($s); 
}); 

if($currSection.length > 0) { 
    $(window).scroll(function(){ 
    // step 3. check for any section that is 'partially in viewport' 
    var $nextAndCurrSection = $.grep($sections, function($s) { 
     return anyOfElementInViewport($s); 
    }); 
    if($nextAndCurrSection.length > 0) { 
     // remove currSection from list 
     var $nextSection = $($nextAndCurrSection).not($($currSection)); 
     if($nextSection.length > 0) { 
     alert('test'); 
     } 
    } 
    }); 
}

更新根據您的要求，我會建議目前這個插件：alvarotrigo.com/fullPage

來源

2015-12-15 18:35:08

感謝您將這一切放在一起。我明白爲什麼插件會是更好的路線。你能推薦一個最適合這種情況的插件嗎？ – Krillzoo

根據您的要求，我現在會推薦這個插件：http://alvarotrigo.com/fullPage/ –

我做了一些挖掘，並且遇到了fullPage.js。這看起來很神奇。再次感謝提供的例子。 – Krillzoo

限制滾動到目標ID

回答

相關問題