Javascript-форум (https://javascript.ru/forum/)
-   Opera, Safari и др. (https://javascript.ru/forum/css-html-browser/)
-   -   Плавный скролл на сайте, прокручивается вся страница при работе с тачпадом в Safari 7 (https://javascript.ru/forum/css-html-browser/59539-plavnyjj-skroll-na-sajjte-prokruchivaetsya-vsya-stranica-pri-rabote-s-tachpadom-v-safari-7-a.html)

Vyacheslav.Y 15.11.2015 22:04

Плавный скролл на сайте, прокручивается вся страница при работе с тачпадом в Safari 7
 
Добрый день. Подскажите из за чего при работе с тачпадом на MAc страница скролит в самый низ, а не понемногу? использую данный скрипт:
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var SmoothScroll = function(){
  this.init();
};

SmoothScroll.prototype = {
  dirOfChange: 0,
  scrollTop: 0,
  init: function(){
    this.bindEvents();
    this.render();
  },
  bindEvents: function(){
    var self = this;
    $('html, body').on('mousewheel', function(e){
      e.preventDefault();
      var change =  e.deltaY * 10;
      self.scrollTop -= change;
      
      if(change > 0){
        self.dirOfChange = -1;
      }else{
        self.dirOfChange = 1;
      }
    });
  },
  render: function(){
    var self = this;
    window.requestAnimFrame(function(){      
      self.render();
    }); 
    
    if (this.dirOfChange < 0) {
      if (this.scrollTop > -1) {
        this.scrollTop = 0;
        return;
      }
    } else {
      if (this.scrollTop < 1) {
        this.scrollTop = 0;
        return;
      }
    }
    
    TweenMax.set($('html, body'), {
      scrollTop: "+=" + this.scrollTop
    });

    this.scrollTop *= 0.9;
  }
};
var ss = new SmoothScroll();

и библиотеки mousewheel и TweenMax

Vyacheslav.Y 17.11.2015 18:57

Проблема возникает не только в браузере Safari, не работает нормально на всех устройствах с тач-трекпадом

Vyacheslav.Y 19.11.2015 22:26

Возможно, комунибудь будет интересно решение этой проблемы.
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

var SmoothScroll = function(){
  this.init();
};

SmoothScroll.prototype = {
  dirOfChange: 0,
  scrollTop: 0,
  init: function(){
    this.bindEvents();
    this.render();
  },
  bindEvents: function(){
    var self = this;
    $('html, body').on('mousewheel', function(e){
      e.preventDefault();
      var change = e.originalEvent.wheelDelta/120 || -e.originalEvent.detail/3; 
      change = change * 7; 
      self.scrollTop -= change;
      
      if(change > 0){
        self.dirOfChange = -1;
      }else{
        self.dirOfChange = 1;
      }
    });
  },
  render: function(){
    var self = this;
    window.requestAnimFrame(function(){      
      self.render();
    }); 
    
    if (this.dirOfChange < 0) {
      if (this.scrollTop > -1) {
        this.scrollTop = 0;
        return;
      }
    } else {
      if (this.scrollTop < 1) {
        this.scrollTop = 0;
        return;
      }
    }
    
    TweenMax.set($('html, body'), {
      scrollTop: "+=" + this.scrollTop
    });

    this.scrollTop *= 0.9;
  }
};
var ss = new SmoothScroll();


Часовой пояс GMT +3, время: 21:40.