Question

我的页面有很多部分，我想知道是否可以让页面在该部分中上下滚动。

<body>
<section id="1"><!-- if you are here then you can scroll down-->
some huge text<!--if you reaches the end of the text you can't scroll down anymore-->
<a href="#2">section2</a><!--but if you click the link you can scroll down to section2-->
</section>
<section id="2">
some huge text
<a href="#3">section3</a>
</section>
<section id="3">
some huge text
<a href="#3">section4</a>
</section>
</body>

如果您在第1部分，您可以在第1部分中上下滚动，但是，如果您点击链接，您可以在第2部分和第1部分中向上和向下滚动，但是，您仍然可以在单击另一个链接之前，请转到第3节。有一些方法可以做这样的事情吗？

Answer 1

您必须为每个部分创建新的HTML页面，例如page1.html，page2.html，page3.html，然后将其放入您的href中。

或者您也可以一次只显示一个部分，然后点击链接隐藏/显示其他部分。

Answer 2

是的，你可以。您也可以尝试实现iScroll。 http://cubiq.org/iscroll-5

.mainBody
{
  height: 40rem;
  overflow: scroll;
}
#section1, #section2, #section3, #section4
{
  width: 10rem;
  height: 10rem;
  overflow: scroll;
}

<body>
    <div class="mainBody">
        <section id="section1"><!-- if you are here then you can scroll down-->
            some huge text<!--if you reaches the end of the text you can't scroll down anymore-->
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            <a href="#section2">section2</a><!--but if you click the link you can scroll down to section2-->
        </section>
        <section id="section2">
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text 
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            <a href="#section3">section3</a>
        </section>
        <section id="section3">
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            <a href="#section4">section4</a><!--but if you click the link you can scroll down to section2-->
        </section>
        <section id="section4">
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text 
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            some huge text
            <a href="#section1">section1</a>
        </section>
    </div>

</body>

Answer 3

使用jQuery，您可以在单击上移动每个块，并将每个块作为可滚动的div。您可以添加动画，以便在单击下一个/上一个时滚动得很好。如果你愿意的话，你也可以在普通的javascript中完成这个。

<强> HTML

<div class="section active">
  Text 1<br>
  ...
</div>
<div class="section">
  Text 2<br>
  ...
</div>
<div class="section">
  Text 3<br>
  ...
</div>
<div class="section">
  Text 4<br>
  ...
</div>
<div id="prev">
Previous
</div>
<div id="next">
Next
</div>

<强> CSS

body, html{
  overflow: hidden;
  height: 100%; width: 100%;
}
.section{
  position: absolute;
  height: 100%; width: 100%;
  box-sizing: border-box;
  top: 100%;
  background-color: #ccc;
  padding-bottom: 50px;
  overflow: auto;
}
.section.active{
  top: 0;
}
.section.prev{
  top:-100%;
}
#prev, #next{
  color: white;
  background-color: black;
  border-radius: 10px;
  border: 2px solid white;
  position: absolute;
  bottom: 10px;
  padding: 5px;
  cursor: pointer;
}
#prev{  
  left: 10px;
  display: none;
}
#next{
  right: 10px;
}
#next:hover, #prev:hover{ background-color: #444; }

<强> JS

var page = 1;
var lastPage = $('.section').length;

$('#next').click(function(){
    page++;
  $('#prev').show();
  if(page >= lastPage){
    $('#next').hide();
  }
  $('.section').eq(page-2).addClass('prev').removeClass('active');
  $('.section').eq(page-1).addClass('active');
});
$('#prev').click(function(){
    page--;
  $('#next').show();
  if(page == 1){
    $('#prev').hide();
  }
  $('.section').eq(page).removeClass('active');
  $('.section').eq(page-1).addClass('active').removeClass('prev');
});

https://jsfiddle.net/h99s94rf/

纯JS

var $ = document.querySelectorAll.bind(document);
var id = document.getElementById.bind(document);
var page = 1;
var lastPage = $('.section').length;

id('next').addEventListener("click",function(){
    page++;
  id('prev').style.display = 'block';
  if(page >= lastPage){
    id('next').style.display = 'none';
  }
    //add class prev
    if ($('.section')[page-2].classList)
    { $('.section')[page-2].classList.add('prev'); }
    else
    { $('.section')[page-2].className += ' ' + 'prev'; }
    //remove class active
    if ($('.section')[page-2].classList)
    { $('.section')[page-2].classList.remove('active'); }
    else
    { $('.section')[page-2].className = $('.section')[page-2].className.replace(new RegExp('(^|\\b)' + 'active'.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); }
    //add class active
    if ($('.section')[page-1].classList)
    { $('.section')[page-1].classList.add('active'); }
    else
    { $('.section')[page-1].className += ' ' + 'active'; }
});
id('prev').addEventListener("click",function(){
    page--;
  id('next').style.display = 'block';
  if(page == 1){
    id('prev').style.display = 'none';
  }
  //remove class active
    if ($('.section')[page].classList)
    { $('.section')[page].classList.remove('active'); }
    else
    { $('.section')[page].className = $('.section')[page].className.replace(new RegExp('(^|\\b)' + 'active'.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); }
    //remove class prev
    if ($('.section')[page-1].classList)
    { $('.section')[page-1].classList.remove('prev'); }
    else
    { $('.section')[page-1].className = $('.section')[page-1].className.replace(new RegExp('(^|\\b)' + 'prev'.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); }
    //add class active
    if ($('.section')[page-1].classList)
    { $('.section')[page-1].classList.add('active'); }
    else
    { $('.section')[page-1].className += ' ' + 'active'; }
});

https://jsfiddle.net/h99s94rf/1/

Answer 4

试试这个

$('#element').on('scroll touchmove mousewheel', function(e){
  e.preventDefault();
  e.stopPropagation();
  return false;
})

有一种方法可以阻止页面特定部分的滚动吗？

4 个答案:

纯JS