ページを特定の場所でのみ使用してdivスクロールを行いますか？

Question

divはページと一緒にスクロールするが、ページの特定の領域のみにスクロールできるようにするにはどうすればよいですか？

私はページの一部だけのためにCSSでこれを行う方法を考えることができません、私はjavascriptが唯一のオプションかもしれないと思う。

ページの3つのセクション、トップ,中およびボトムがあります。

真ん中のセクションのユーザーにスクロールしてミドルセクションだけでなく、ミドルセクションの下部の上部にある[場所に残さ」であるとスクロールを停止すべき権利浮かべdivがあります。

#Top { 
 
    background-color: grey; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#Middle { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 800px; 
 
} 
 
#Bottom { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#scrolling-section { 
 
    background-color: yellow; 
 
    width: 30%; 
 
    height: 150px; 
 
    float: right; 
 
}

<div id="Top"> 
 
</div> 
 
<div id="Middle"> 
 
    <div id="scrolling-section"> 
 
    This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section 
 
    </div> 
 
</div> 
 
<div id="Bottom"> 
 
</div>

JSFiddle：fiddle

Answer 1

は、だからここにあなたはjqueryのを使用して解決策を持っている：

1. はscrollイベントを聞き、アップ/ダウンスクロールしながらscrolling-sectionがMiddleセクションの外に行くどのくらいの計算します。

2. scrolling-sectionにposition: relativeが追加されました。

3. scrolling-sectionの位置を適宜調整します。

$(document).scroll(function() { 
 
    var wrapper = $('#Middle'); 
 
    var box = $('#scrolling-section'); 
 

 
    var offsetTop = - wrapper.offset().top + $(window).scrollTop(); 
 
    var offsetBottom = wrapper.offset().top - $(window).scrollTop() + wrapper.outerHeight() - box.outerHeight(); 
 

 
    if (offsetBottom > 0 && offsetTop < 0) { 
 
    box.css({ 
 
     'top': 0 
 
    }); 
 
    } else if (offsetBottom > 0 && offsetTop > 0) { 
 
    box.css({ 
 
     'top': offsetTop + 'px' 
 
    }); 
 
    } else { 
 
    box.offset({ 
 
     'top': $(window).scrollTop() + offsetBottom 
 
    }); 
 
    } 
 

 
});

#Top { 
 
    background-color: grey; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#Middle { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 800px; 
 
} 
 
#Bottom { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#scrolling-section { 
 
    position: relative; 
 
    background-color: yellow; 
 
    width: 30%; 
 
    height: 150px; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Top"> 
 
</div> 
 
<div id="Middle"> 
 
    <div id="scrolling-section"> 
 
    This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section 
 
    </div> 
 
</div> 
 
<div id="Bottom"> 
 
</div>

私はこれについてあなたの意見を知ってみましょう。ありがとう！

Answer 2

いくつかのJavaScriptは、あなたが対処したいdiv要素の状態を変更したいポイントを読み取るために必要とされています。これはgetBoundingClientRect()メソッドで行うことができます。私はあなたのことを示すフィドルを作り出しました。 #Middleの位置を読み取るとどうなりますか。あなたに値を示す入力フィールドを追加しました。変更は、位置がゼロになるときに行われます。 ＃スクローリングセクションのCSSプロパティを変更します。

要素の読み取り値が追加されていることがわかります。要素の読み取り位置が正しく配置され、元の幅が保持されます。

var scrollposition = document.getElementById("Middle"); 
 
var scrollsection = document.getElementById("scrolling-section"); 
 
var scrollsection_offsetLeft = scrollsection.offsetLeft; 
 
var scrollsection_width = scrollsection.offsetWidth; 
 

 

 
var valy = document.getElementById("posy"); 
 

 

 
window.addEventListener("scroll", function(event) { 
 
    valy.value = scrollposition.getBoundingClientRect().y || scrollposition.getBoundingClientRect().top; 
 

 
    if (valy.value <= 0) { 
 
    scrollsection.style.position = "fixed"; 
 
    scrollsection.style.top = "0px"; 
 
    scrollsection.style.left = scrollsection_offsetLeft + "px"; 
 
    scrollsection.style.width = scrollsection_width + "px"; 
 
    } else { 
 
    scrollsection.style.position = "static"; 
 
    scrollsection.style.top = "auto"; 
 
    scrollsection.style.left = "auto"; 
 
    } 
 
}, false)

#posy { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
#Top { 
 
    background-color: grey; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#Middle { 
 
    background-color: green; 
 
    width: 100%; 
 
    height: 800px; 
 
} 
 
#Bottom { 
 
    background-color: blue; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
#scrolling-section { 
 
    background-color: yellow; 
 
    width: 30%; 
 
    height: 150px; 
 
    float: right; 
 
}

<input type="text" id="posy" /> 
 
<div id="Top"> 
 
</div> 
 
<div id="Middle"> 
 
    <div id="scrolling-section"> 
 
    This box should scroll along the green section but 'cut-off' and stop scrolling at the top and bottom of the green section 
 
    </div> 
 
</div> 
 
<div id="Bottom"> 
 
</div>

Answer 3

私は自分の携帯電話によしかし、あなたは

#scrolling-section { 
    position: fixed; 
    background-color: yellow; 
    width: 30%; 
    height: 150px; 
    right: 8px; 
} 

を追加する場合、これはページをスクロールしますが、実際にトリガするイベントリスナーがあるように必要があります。 ＃scrolling-sectionが画面に表示され、属性の位置が追加される可能性があります。 #bottomが表示されたときに別のイベントリスナーが#middleのサイズを計算するmargin-top & position：absolute;これが正しい方向に向けるのを助けることを望みます。