There is such a design. Can you please tell how you can make a smooth step-by-step scrolling with the mouse wheel in the .sidebar_news__item blocks in the .sidebar_news__item ? Is it possible to?

 .sidebar_news_block { display: block; position: relative; width: 200px; height: 300px; top: 0; left: 0; overflow-y: scroll; } .sidebar_news { display: block; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; } .sidebar_news__item { display: block; margin: 0; padding: 10px; text-align: justify; } 
 <div class="sidebar_news_block"> <h2>Красивый заголовок</h2> <div class="sidebar_news"> <div class="sidebar_news__item"> Белая береза Под моим окном Принакрылась снегом, Точно серебром. </div> <div class="sidebar_news__item"> Ах, метель такая, просто черт возьми! Забивает крышу белыми гвоздьми. Только мне не страшно, и в моей судьбе Непутевым сердцем я прибит к тебе. </div> <div class="sidebar_news__item"> Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве. </div> <div class="sidebar_news__item"> Хорошо и тепло, Как зимой у печки. И березы стоят, Как большие свечки. И вдали за рекой, Видно, за опушкой, Сонный сторож стучит Мертвой колотушкой. </div> <div class="sidebar_news__item"> Задремали звезды золотые, Задрожало зеркало затона </div> <div class="sidebar_news__item"> Улыбнулись сонные березки, Растрепали шелковые косы. Шелестят зеленые сережки, И горят серебряные росы. </div> </div> </div>

  • What do you understand, under the плавной пошаговой прокруткой колесиком мыши, по блокам ? So sidebar_news_block sidebar_news_block displays only 1 block when scrolling? What then to do if there is a lot of empty space? - Dmytryk
  • @ Dmytryk one step of scrolling with the mouse wheel should scroll the parent block .sidebar_news_block so that inside the parent block the child blocks .sidebar_news__item scrolled one by one, one after another, such as an anchor, from anchor to anchor. Or so I will try to explain: so that at each step of scrolling with the mouse wheel, scrolling stops as soon as the next and subsequent child blocks alternately reach the upper edge of the parent block. - LADYX
  • @ Dmytryk or maybe I will try to explain more readily like this: one step of scrolling with the mouse wheel should be equal to the height of the child block .sidebar_news__item , the height of which can be different. - LADYX

2 answers 2

It seems like everything works. PS: how to make the code can be run on the site?

  var sidebarNewsBlock = document.getElementById("sidebarNewsBlock"), children = sidebarNewsBlock.children, allChildren =[], stepScroll = 20,//регулировка скорости прокрутки №1 nodeElem; //получаем всех детей sidebarNewsBlock for (var i=0; i<children.length; i++){ if (children[i].children.length > 0) { for (var h=0; h<children[i].children.length; h++){ allChildren.push(children[i].children[h]); } } else if(children[i].children.length == 0){ allChildren.push(children[i]); } } sidebarNewsBlock.onwheel = function(event){ window.event.returnValue = false; var r = event.deltaY; //определяем направление движения колесика мышки if (r>0){ for (var i=0; i<allChildren.length; i++){ var t = allChildren[i].getBoundingClientRect(); if (t.top >0) { nodeElem = allChildren[i] lowScroll(); break; } } } else if (r<0) { for (var i=0; i<allChildren.length; i++){ var t = allChildren[i].getBoundingClientRect(); if ((t.top <= 0 && t.top > -2) || t.top > 0){ var g = i-1; if (g>=0) { nodeElem = allChildren[g]; lowScroll(); break; }else if (g<0){ sidebarNewsBlock.scrollTo(0,0) break; } } } } } function lowScroll(){ var k = nodeElem.getBoundingClientRect(); var t = sidebarNewsBlock.scrollTop+sidebarNewsBlock.clientHeight; var timer = 0; if (k.top >0){ if (t == sidebarNewsBlock.scrollHeight) {return};//определяем достигла ли прокрутка низа if (stepScroll < k.top){ sidebarNewsBlock.scrollBy(0,stepScroll); timer = setTimeout(lowScroll, 50);//регулировка скорости прокрутки №2 } else if (stepScroll > k.top) { sidebarNewsBlock.scrollBy(0,k.top+1); if (timer == 0) return; clearTimeout(timer); } } else if (k.top < 0) { var reverseStepScroll = 0-stepScroll; if (reverseStepScroll > k.top){ sidebarNewsBlock.scrollBy(0,reverseStepScroll); timer = setTimeout(lowScroll, 50);//регулировка скорости прокрутки №2 } else if (stepScroll >= k.top) { sidebarNewsBlock.scrollBy(0,k.top+1); clearTimeout(timer); } } } 
 body { margin: 0px; } .sidebar_news_block { display: block; position: relative; width: 200px; height: 300px; top: 0; left: 0; overflow-y: scroll; } .sidebar_news { display: block; margin: 0; padding: 0; overflow-y: auto; overflow-x: hidden; } .sidebar_news__item { box-sizing: border-box; display: block; padding: 10px; text-align: justify; } 
 <div id="sidebarNewsBlock" class="sidebar_news_block"> <h2> Красивый заголовок</h2> <div class="sidebar_news"> <div class="sidebar_news__item"> 1.Белая береза Под моим окном Принакрылась снегом, Точно серебром. </div> <div class="sidebar_news__item"> 2.Ах, метель такая, просто черт возьми! Забивает крышу белыми гвоздьми. Только мне не страшно, и в моей судьбе Непутевым сердцем я прибит к тебе.Ах, метель такая, просто черт возьми! Забивает крышу белыми гвоздьми. Только мне не страшно, и в моей судьбе Непутевым сердцем я прибит к тебе.Ах, метель такая, просто черт возьми! Забивает крышу белыми гвоздьми. Только мне не страшно, и в моей судьбе Непутевым сердцем я прибит к тебе.Ах, метель такая, просто черт возьми! Забивает крышу белыми гвоздьми. Только мне не страшно, и в моей судьбе Непутевым сердцем я прибит к тебе.Ах, метель такая, просто черт возьми! Забивает крышу белыми гвоздьми. Только мне не страшно, и в моей судьбе Непутевым сердцем я прибит к тебе. </div> <div class="sidebar_news__item"> 3.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве.Вот уж вечер. Роса Блестит на крапиве. Я стою у дороги, Прислонившись к иве. </div> <div class="sidebar_news__item"> 4.Хорошо и тепло, Как зимой у печки. И березы стоят, Как большие свечки. И вдали за рекой, Видно, за опушкой, Сонный сторож стучит Мертвой колотушкой. </div> <div class="sidebar_news__item"> 5.Задремали звезды золотые, Задрожало зеркало затона </div> <div class="sidebar_news__item"> 6.Улыбнулись сонные березки, Растрепали шелковые косы. Шелестят зеленые сережки, И горят серебряные росы. </div> <div class="sidebar_news__item"> 7.Улыбнулись сонные березки, Растрепали шелковые косы. Шелестят зеленые сережки, И горят серебряные росы. </div> <div class="sidebar_news__item"> 8.Улыбнулись сонные березки, Растрепали шелковые косы. Шелестят зеленые сережки, И горят серебряные росы. </div> <div class="sidebar_news__item"> 9.Улыбнулись сонные березки, Растрепали шелковые косы. Шелестят зеленые сережки, И горят серебряные росы. </div> <div class="sidebar_news__item"> 10.Улыбнулись сонные березки, Растрепали шелковые косы. Шелестят зеленые сережки, И горят серебряные росы. </div> </div> </div>

  • Yes, yes exactly what you need. Thank you so much for your work. Good luck! - LADYX
  • Ah, I missed one moment - smoothness. How can I add? - LADYX
  • Made changes to the code - Dmytryk
  • Tell me, what is this error when you run the code here on the site? - LADYX
  • All - I wrote one more test. Error no longer appears - Dmytryk

If I correctly understood your task. That will suit you fullPage.js

  • No, not at all. The whole plugin for this task in my case will be superfluous. - LADYX
  • Well, if you need a plugin to solve your problem, it will not be superfluous. You can of course write your own plugin. I just suggested the path of least resistance. - Vasiliy Rusin