прокрутка содержимого div с помощью полосы прокрутки браузера (css / jquery) - PullRequest
Новая
       0

прокрутка содержимого div с помощью полосы прокрутки браузера (css / jquery)

2 голосов
/ 28 января 2011

Компоновка:

http://img62.imageshack.us/img62/9243/scrollcontent.png

розовая область - это макет страницы.

черная область всегда должна оставаться прямо под оранжевой областью.

Так, например, когда высота оранжевой области составляет всего 200 пикселей, вместо 600 пикселей (как показано на рисунке выше), черная область все еще будет прямо под оранжевой областью на 200 пикселей, а не 600 пикселей.

И что я хочу сделать сейчас, это когда я перемещаю полосу прокрутки окна Я хочу, чтобы содержимое в оранжевой области сначала прокручивалось (оранжевая область не должна иметь полос прокрутки! ). И как только я достигну нижней части содержимого в оранжевой области, я снова смогу прокрутить обычную страницу.

Анойн знает, как это сделать? Надеюсь, это не слишком запутанно. 

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
body{
    background-color:#c3c3c3;
}
.layout{
    margin:0px auto;
    padding:30px 0px;
    width:900px;
    height:3000px;
    background-color:#f09;
}
.orange_area{
    margin:0px auto;
    width:500px;
    max-height:600px;
    overflow:hidden;
    background-color:#ff7f27;
}
.black_area{
    margin:0px auto;
    width:500px;
    height:50px;
    background-color:#000;
}
</style>
<script>
$(document).ready(function()
{
    $(window).scroll(function()
    {
        //...
    });
});
</script>
</head>
<body>
<div class="layout">
<div class="orange_area"><div class="content"></div></div>
<div class="black_area"></div>
</div>
</body>
</html>

1 Ответ

0 голосов
/ 28 января 2011

Исходя из понимания проблемы, вы не сможете обмануть полосу прокрутки тела (отображаемую в виде полосы прокрутки окна), чтобы перемещать, а не перемещать ее содержимое.

Но возможный обманможет попробовать

Когда вы показываете рекламу, установите тело overflow:hidden;, которое должно скрывать полосы прокрутки тела по умолчанию.Но вы должны поместить свое объявление в прозрачный контейнер, который занимает весь размер клиентской области окна и поместит в него объявление.

Когда объявление превысит его высоту, вместо полосы прокрутки окна будет показана полоса прокрутки.,Таким образом, это выглядело бы так, как будто это полоса прокрутки тела.

Но у вас возникнут проблемы при прокрутке до конца объявления.Это будет означать, что позиция прокрутки будет установлена ​​внизу.В этот момент вы должны снова переключить полосы прокрутки ... Но полоса прокрутки тела будет в верхней позиции, поскольку контент еще не прокручивается.

Я не думаю, что это можно сделать удобным для пользователя способом.По крайней мере, с полосами прокрутки по умолчанию.

Пользовательские элементы управления полосой прокрутки

Вы можете предоставить собственный элемент управления полосой прокрутки (position:fixed;height:100%;right:0;) и использовать его для прокрутки своего содержимого по своему усмотрению.Но решать вам, возможно ли это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...