Прокрутка страницы

@SanychBY · Регистрация: 04.06.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте.
На странице я создаю что-то на подобии окна с помощью див.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
display: block;
position: fixed;
width: 50%;
left: 24.5%;
padding: 5px;
top: 15%;
height: auto;
margin: 0 auto;
position: absolute;
right: auto;
z-index: 9900;
border: 1px solid #CDD3FF;
background-image: none;
background-color: #FFF;
border-radius: 10px;
box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.5);
font-family: 'Verdana',serif;

И маску для затемнения

CSS
1
2
3
4
5
6
7
8
9
10
11
display: block;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
background-color: #000;
opacity: 0.5;

При этом мы спокойно можем скроллить страницу вверх и вниз. Как сделать так, чтобы скролинг "переключался" со страницы на окно: если окно не влазит, то прокрутка шла по его размеру высоты, а не размеру страницы? Спасибо.

@Academik · 05.04.2014, 23:14

SanychBY, такого нельзя сделать.

@SanychBY · 05.04.2014, 23:19 **[ТС]**

Mr Coder, в вк сделано

@Vladislav WebDev · 06.04.2014, 02:48

Сообщение от Mr Coder

такого нельзя сделать.

Можно!
SanychBY, например с помощью джаваскрипта. Я приведу пример на jQuery для компактности:

HTML5
1
2
3
4
5
6
7
8
9
<div id="window">
    <div id="wrapper">
        <div id="content">
            <p>
                Some very long text
            </p>
        </div>
    </div>
</div>

CSS
1
2
3
4
5
6
7
#wrapper {
    background: #0cf;
    height: 500px;
    width: 300px;
    overflow: hidden;
    position: fixed;
}

JavaScript
1
2
3
4
5
$("#window").height($("#content").height() * $(window).height()/$("#wrapper").height() - $("#wrapper").height())
 
$(document).scroll(function(e) {
    $("#wrapper").scrollTop($(this).scrollTop())
})

Живой пример в действии http://jsbin.com/qaxekewo/1/

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	05.04.2014, 23:14
	SanychBY, такого нельзя сделать. 0

@SanychBY 39 / 46 / 3 Регистрация: 04.06.2013 Сообщений: 1,532
	05.04.2014, 23:19 [ТС]
	Mr Coder, в вк сделано 0