CSS Snap точек разрывов Гладкая прокрутка кода - PullRequest
Новая
       36

CSS Snap точек разрывов Гладкая прокрутка кода

0 голосов
/ 13 февраля 2019

У меня есть этот удивительный код, который при событии "mousewheel" плавно прокручивает страницу с интервалами, определяемыми элементами <span>.Он работает именно так, как я хочу:

https://codepen.io/Wcomp/pen/vbrqLJ?editors=1100

Однако, чего я также хотел бы добиться, так это чтобы полоса прокрутки перетаскивалась к ближайшему элементу span на mouseup, еслипользователь должен был щелкнуть и перетащить полосу прокрутки вместо того, чтобы использовать колесо мыши для прокрутки.Свойства CSS Scroll Snap прекрасно справляются с этой задачей, но затягивают плавную прокрутку колеса мыши в процессе:

https://codepen.io/Wcomp/pen/vbrqmp?editors=1100

Может ли код, который у меня есть для плавной прокрутки колеса мыши, быть адаптирован для выполнениято же самое, что: 

body{
    scroll-snap-type: y mandatory;
}

span{
    scroll-snap-align: start;
}

CSS Scroll Snap также не дает мне никакого контроля над временем.Вот код плавной прокрутки для колеса мыши: 

function mouse_wheel_scroll_behavior() {

  var delay = false;

  $(document).on('wheel', function(event) {

    event.preventDefault();

    if(delay) return;

    delay = true;

    setTimeout(function(){delay = false}, 100)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;

    var a= document.getElementsByTagName('span');

    if(wd < 0) 
    {
      for(var i = 0 ; i < a.length ; i++) 
      {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }  
    }

    else 
    {
      for(var i = a.length-1 ; i >= 0 ; i--) 
      {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }

    }

    if(i >= 0 && i < a.length) 
    {
      $('html,body').animate({ scrollTop: a[i].offsetTop }, 600);            
    }

  });
}
...