Как сделать 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, 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 s с автоматической высотой и последние 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>