Избавиться от полосы прокрутки

0

Я создаю веб-сайт, и я хочу разместить несколько ссылок фиксированного типа внизу. Когда вы нажимаете на одну из этих ссылок, вы делаете одно изображение на страницу до следующего изображения и так далее. И если вы прокрутите вниз, вы тоже спуститесь к этой картине. НО Я хочу избавиться от полос прокрутки. Это означает, что вы можете спуститься при прокрутке, но вы не можете видеть, где именно вы находитесь на этой странице.

  • 0
    Почему вы хотите сделать это для ваших пользователей? Это не похоже на очень дружелюбный пользовательский опыт.
  • 0
    Это выглядит потрясающе. Это звучит здорово. Вы не видите, где находитесь на странице в полосе прокрутки, потому что у вас ее нет, но вы видите, где находитесь в активной ссылке.
Показать ещё 2 комментария
Теги:
scroll

1 ответ

0
Лучший ответ

Вот что я буду делать: у меня будет весь охватывающий HTML-контейнер, а затем перемещайте дочерний контент соответственно на основе ваших пользовательских событий. Например, onClick одной из ваших "фиксированных" ссылок, а также onScroll окна вы можете инициировать одно и то же событие, по существу.

HTML:

<div id="container">
    <div id="content1"></div>
    <div id="content2"></div>
    <div id="content3"></div>
    <div id="content4"></div>

    <div id="links">
        <a href="0" class="contentLink">link 1</a> | 
        <a href="1" class="contentLink">link 2</a> | 
        <a href="2" class="contentLink">link 3</a> | 
        <a href="3" class="contentLink">link 4</a>
    </div>
</div>

CSS:

#container, #content1, #content2, #content3, #content4 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    overflow: hidden;
    z-index: 1;
}
#content1 { top: 0%; background: green; }
#content2 { top: 100%; background: red; }
#content3 { top: 200%; background: orange; }
#content4 { top: 300%; background: purple; }

#links {
    position: absolute;
    bottom: 10px; left: 10px;
    z-index: 2;
}

JS:

$(function() {
    var currentPos = 0,
        scrollDirection;

    $(".contentLink").click(function(evt) {
        // prevent default behavior to avoid page refresh
        evt.preventDefault();

        // get the desired position
        newPos = $(this).attr("href");

        // if the current position is less than the desired position
        // move content up, if it greater than - move it down
        // do nothing if they're equal
        if (newPos > currentPos) {
            $("#content1, #content2, #content3, #content4").animate({
                top: "-=" + ((newPos-currentPos) * 100) + "%" 
            }, 1000);        
        } else if (newPos < currentPos) {
            $("#content1, #content2, #content3, #content4").animate({
                top: "+=" + ((currentPos-newPos) * 100) + "%" 
            }, 1000);  
        }

        // reset currentPos accordingly
        currentPos = newPos;
    });
});

Надеюсь, это поможет!

  • 0
    Он прекрасно работает со скрытой прокруткой, но не прокручивается вниз.
  • 0
    что ты имеешь в виду? Вы пытаетесь создать большую страницу с прокручиваемым содержимым в дополнение к скрытой части страницы?
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню