stop-scroll.js

const defaultColor = 'rgb(255, 255, 0)';
const stopColor = 'rgb(37, 37, 37)';

/**
 * Scroll
 */
window.onscroll = scrollWindow;

/**
 * スクロールされている間呼ばれる
 */
function scrollWindow() {
    // 条件
    var items = document.querySelectorAll('.stop');
    items.forEach( function(item){
        var backgroundColor = item.style.backgroundColor;
        var inScreen = containsTargetPosition(item);
        if ( inScreen && !(backgroundColor == stopColor) ){
            item.style.backgroundColor = stopColor;
            stopScroll();
        } else if (!inScreen && backgroundColor == stopColor ) {
            item.style.backgroundColor = defaultColor;
        }
    });
}
 
/**
 * スクロールを止める
 */
function stopScroll() {
    // 現在のスクロール量
    var scrollOffsetY = window.pageYOffset;
    window.scrollTo(0,scrollOffsetY);
}

/**
 * 要素が指定した範囲にあるかどうか
 * @param {Element} item 
 * @return {Booelan}
 */
function containsTargetPosition(item) {
    var screenHeight = window.innerHeight;
    var itemBottomY = item.getBoundingClientRect().bottom;
    // 画面topからどれだけか
    var targetPositionY = screenHeight / 2;
    // 数値が小さいとスクロール時に無視されて止まらない可能性がある
    var offset = 20;

    if (itemBottomY >= targetPositionY - offset && itemBottomY <= targetPositionY + offset) {
        return true;
    }

    return false;
}