Question

我有5个div：

<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＆lt; - here。

Answer 2

通过将所有内容包装在固定高度的容器中，您可以更加可控并使其与页面的其余部分共存。使用自动高度设置所有div，并使用固定高度和div设置overflow:auto。

这样的事情：http://jsfiddle.net/3emyqzqt/2/embedded/result/

＆＃13;

$("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');
});

＆＃13;

* {
    box-sizing: border-box;
}

.container {
    position: relative;
    overflow: hidden;
    height: 320px;
    width: 240px;
    margin: 8px auto;
}

.no, .yes {
    height: 100%;
}
.yes {
    overflow: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
	<div id="div1" class="no">
		<a id="a1"></a>    
		<h2>Section A</h2>
		<p>text</p>
		<a href="#a2">Next</a>
	</div>
	<div id="div2" class="no">
		<a id="a2"></a>    
		<h2>Section B</h2>
		<p>text</p>
		<a href="#a3">Next</a>
	</div>
	<div id="div3" class="no">
		<a id="a3"></a>
		<h2>Section C</h2>
		<p>text</p>
		<a href="#a4">Next</a>
	</div>
	<div id="div4" class="no last">
		<a id="a4"></a>
		<h2>Section D</h2>
		<p>text</p>
		<a class="last" href="#a5">Next</a>
	</div>
	<div id="div5" class="yes">
		<a id="a5"></a>
		<h2>Section E</h2>
		<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>
		<a href="#a1">Top</a>
	</div>
</div>

＆＃13;

如何使div只能自行滚动？

2 个答案: