如何讓一個div只能自己滾動？

Question

我有5分格：通過點擊按鈕

<div id=A class="no"></div> 
<div id=B class="no"></div> 
<div id=C class="no"></div> 
<div id=D class="no"></div> 
<div id=E></div> 

從A頁面開始和豐富到E。我使A，B，C，D不能以這種方式滾動：

jQuery(function($){`$(".no").on('mousewheel DOMMouseScroll MozMousePixelScroll touchmove', function(e){ 
    e.preventDefault();   
}); 

}）;

最後E是可滾動的，但同時我希望當用戶在E div上時，他不應該被允許滾動到上面的div（A，B，C，D）。

有什麼建議嗎？ - http://jsfiddle.net/remat/qhcvbeeo/

Answer 1

有了小改動HTML：

<div id="A" class="slide"> 
    <p>Lorem ipsum for A</p> 
    <a href="#B" class="change_slide"><button type="button">Go to B</button></a> 
</div> 
<div id="B" class="slide"> 
    <p>Lorem ipsum for B</p> 
    <a href="#C" class="change_slide"><button type="button">Go to C</button></a> 
</div> 
<div id="C" class="slide"> 
    <p>Lorem ipsum for C</p> 
    <a href="#D" class="change_slide"><button type="button">Go to D</button></a> 
</div> 
<div id="D" class="slide"> 
    <p>Lorem ipsum for D</p> 
    <a href="#E" class="change_slide"><button type="button">Go to E</button></a> 
</div> 
<div id="E" class="slide scrollable"> 
    <p>This is E div</p> 
    <a href="#A" class="change_slide"><button type="button">Go to A</button></a> 
</div> 

CSS唯一的解決辦法是：

body, html { 
    height: 100%; 
    overflow: hidden; 
} 
.slide { 
    height: 100%; 
    overflow: hidden; 
} 
.scrollable{ 
    overflow: auto; 
    background: none #cccccc; 
} 

Fiddle進行測試。我可以看到的問題是在窗口調整它打破。這可以固定的簡單JavaScript代碼：

function checkHash() { 
    window.location.hash = window.location.hash; 
}; 
$(window).on('resize', checkHash); 

Final Fiddle < - 在這裏。

Answer 2

通過將所有內容都包裝在固定高度的容器中，它對您而言將更加可控，並使其與頁面的其餘部分共存。使所有div與自動高度，並最後div固定高度和overflow:auto。

事情是這樣的：http://jsfiddle.net/3emyqzqt/2/embedded/result/

$("a").on("click", function (e) { 
 
    e.preventDefault(); 
 
    var nextAnchor = $(this).attr('href').replace("#", ""); 
 
    var gotoPoint = $(".container").scrollTop() - $(".container").offset().top + $("#" + nextAnchor).offset().top 
 
    console.log(gotoPoint); 
 
    $('.container').animate({ 
 
     scrollTop: gotoPoint 
 
    }, 'normal'); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 320px; 
 
    width: 240px; 
 
    margin: 8px auto; 
 
} 
 

 
.no, .yes { 
 
    height: 100%; 
 
} 
 
.yes { 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t <div id="div1" class="no"> 
 
\t \t <a id="a1"></a>  
 
\t \t <h2>Section A</h2> 
 
\t \t <p>text</p> 
 
\t \t <a href="#a2">Next</a> 
 
\t </div> 
 
\t <div id="div2" class="no"> 
 
\t \t <a id="a2"></a>  
 
\t \t <h2>Section B</h2> 
 
\t \t <p>text</p> 
 
\t \t <a href="#a3">Next</a> 
 
\t </div> 
 
\t <div id="div3" class="no"> 
 
\t \t <a id="a3"></a> 
 
\t \t <h2>Section C</h2> 
 
\t \t <p>text</p> 
 
\t \t <a href="#a4">Next</a> 
 
\t </div> 
 
\t <div id="div4" class="no last"> 
 
\t \t <a id="a4"></a> 
 
\t \t <h2>Section D</h2> 
 
\t \t <p>text</p> 
 
\t \t <a class="last" href="#a5">Next</a> 
 
\t </div> 
 
\t <div id="div5" class="yes"> 
 
\t \t <a id="a5"></a> 
 
\t \t <h2>Section E</h2> 
 
\t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
\t \t <a href="#a1">Top</a> 
 
\t </div> 
 
</div>