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

@духачевский · Регистрация: 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, что бы скролл не выскакивал, и везде все работает, даже на ноутбуке попробовал тачпадом крутить, тоже все в порядке. Я еще проверю на других устройствах и если будут косяки то не буду это использовать. Еще раз большое спасибо)

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

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

	Посекционный скроллинг 19.03.2016, 15:38. Показов 2981. Ответов 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

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

Решение