Посекционный скроллинг

@духачевский · Регистрация: 13.11.2014

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

Всем привет друзья. Вчера столкнулся с нетривиальной для меня задачей. Помогите пожалуйста разобраться как проще реализовать задуманное дизайнером. Имеется лендинг на первом экране которого размещается видео, оно должно быть на всю высоту экрана, далее следует остальной контент. Требуется при первом открытии страницы переходить к дальнейшему контенту не скроллингом а по событию wheel, т.е только пользователь должен начать крутить колесико и попадать на остальной контент только плавно, и наоборот находясь на секции на одну ниже чем это самое видео попасть на вверх нужно не скроллингом а так же при первой попытке начать крутить колесико мыши вверх.

Я теоретически это представляю так. В начале лендинга имеется две секции, одна с видео и одна ниже с другим контентом, каждой секции присваиваю id и затем отлавливаю событие wheel на каждой из этой секции, после того как будет поймано событие перемещать body по оси Y используя transform:translate3d() на 100% вверх или вниз. Но вот как это прописать кодом, я не понимаю так как в js не силен.

Помогите пожалуйста реализовать задуманное

Слепил преблизительную разметку тут http://codepen.io/bogdanovich/pen/oxZXze

Заранее всем большое спасибо)

@Shakalaka · 19.03.2016, 16:00

духачевский, http://alvarotrigo.com/fullPage/

@духачевский · 19.03.2016, 16:12 **[ТС]**

Спасибо, но такие плагины мне не подходят, я уже пробовал. Я забыл указать на то что после перехода на основной контент после видео дальше должен работать стандартный скролл

@Shakalaka · 19.03.2016, 19:12

HTML5
1
2
3
4
5
6
<div class="slide">
    <div class="slide__inner">
        нажмите стрелку "вниз"
    </div>
</div>
<div class="rest">нажмите стрелку "вверх"</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
*{
  box-sizing:border-box;
}
html, body{
  margin:0;
  padding:0;
}
.slide{
  background:#333;
  overflow:hidden;
  transition:height .5s;
  color:#fff;
  text-align:center;
  font-size:50px;
  position:relative;
}
.slide__inner{
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
.rest{
  background:#0f0;
  height:2000px;
  text-align:center;
  font-size:50px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var HEIGHT = getWindowHeight();
var SLIDE = document.querySelector(".slide");
 
function getWindowHeight(){
    return window.innerHeight;
}
 
function watchScroll(direction){
    if(direction == "bottom"){
        SLIDE.style.height = "0";
        document.body.style.overflow = "visible";
    }
    else{
        SLIDE.style.height = HEIGHT + "px";
        document.body.style.overflow = "hidden";
    }
}
 
function init(){
    SLIDE.style.height = HEIGHT + "px";
}
 
 
document.onwheel = function(e){
    if(e.deltaY > 0 && window.pageYOffset == 0){
        watchScroll("bottom");
    }
    else if(e.deltaY < 0 && window.pageYOffset == 0){
        watchScroll("top");
    }
}
 
document.onkeydown = function(e){
    var code = e.which || e.keyCode
    if(code == 40 && window.pageYOffset == 0){
        watchScroll("bottom");
    }
    else if(code == 38 && window.pageYOffset == 0){
        watchScroll("top");
    }
}
 
window.onload = function(){
    if(window.pageYOffset == 0){
        document.body.style.overflow = "hidden";
        init();
    }
}
window.onresize = init;

http://codepen.io/anon/pen/grmavp
У меня нет мышки, так что проверить работоспособность wheel я не могу...
Сделал по нажатию стрелок на клаве. Плюс на touch устройствах это работать не будет, нужно доделывать

А вообще затея, честно говоря, дебильная...

@духачевский · 19.03.2016, 19:22 **[ТС]**

Спасибо вам большое это как раз то что я и хотел) А почему вы считаете что затея дибильная? Дизайнер решил что так все будет выглядеть круто)

@Shakalaka · 19.03.2016, 19:40

Сообщение от духачевский

А почему вы считаете что затея дибильная?

Люди проводят исследования, книги пишут, все чтобы улучшить юзабилити сайтов, а с такими вот "дизайнами" человек должен догадываться что же ему нужно сделать... Скролл то появляется, то исчезает. Вот у меня, допустим, дома мышки нет вообще, получается в вашем сайте я бы дальше первого слайда не дошел бы.. Опять же, под touch устройства нужны дополнительные пляски с бубном.

@духачевский · 20.03.2016, 19:13 **[ТС]**

Да я понимаю о чём вы говорите. Но я навесил на body overflow:hidden, что бы скролл не выскакивал, и везде все работает, даже на ноутбуке попробовал тачпадом крутить, тоже все в порядке. Я еще проверю на других устройствах и если будут косяки то не буду это использовать. Еще раз большое спасибо)

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57

	Посекционный скроллинг 19.03.2016, 15:38. Показов 2984. Ответов 6 Метки нет (Все метки) Всем привет друзья. Вчера столкнулся с нетривиальной для меня задачей. Помогите пожалуйста разобраться как проще реализовать задуманное дизайнером. Имеется лендинг на первом экране которого размещается видео, оно должно быть на всю высоту экрана, далее следует остальной контент. Требуется при первом открытии страницы переходить к дальнейшему контенту не скроллингом а по событию wheel, т.е только пользователь должен начать крутить колесико и попадать на остальной контент только плавно, и наоборот находясь на секции на одну ниже чем это самое видео попасть на вверх нужно не скроллингом а так же при первой попытке начать крутить колесико мыши вверх. Я теоретически это представляю так. В начале лендинга имеется две секции, одна с видео и одна ниже с другим контентом, каждой секции присваиваю id и затем отлавливаю событие wheel на каждой из этой секции, после того как будет поймано событие перемещать body по оси Y используя transform:translate3d() на 100% вверх или вниз. Но вот как это прописать кодом, я не понимаю так как в js не силен. Помогите пожалуйста реализовать задуманное Слепил преблизительную разметку тут http://codepen.io/bogdanovich/pen/oxZXze Заранее всем большое спасибо) 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	19.03.2016, 16:00
	духачевский, http://alvarotrigo.com/fullPage/ 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	19.03.2016, 16:12 [ТС]
	Спасибо, но такие плагины мне не подходят, я уже пробовал. Я забыл указать на то что после перехода на основной контент после видео дальше должен работать стандартный скролл 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	19.03.2016, 19:22 [ТС]
	Спасибо вам большое это как раз то что я и хотел) А почему вы считаете что затея дибильная? Дизайнер решил что так все будет выглядеть круто) 0

@духачевский 0 / 0 / 0 Регистрация: 13.11.2014 Сообщений: 57
	20.03.2016, 19:13 [ТС]
	Да я понимаю о чём вы говорите. Но я навесил на body overflow:hidden, что бы скролл не выскакивал, и везде все работает, даже на ноутбуке попробовал тачпадом крутить, тоже все в порядке. Я еще проверю на других устройствах и если будут косяки то не буду это использовать. Еще раз большое спасибо) 0

Посекционный скроллинг

Решение