gromo / jquery.scrollbar

jQuery CSS Customizable Scrollbar
GNU General Public License v2.0
755 stars 237 forks source link

CSS Transform вместо top/left #92

Open Evangeline-Rei opened 8 years ago

Evangeline-Rei commented 8 years ago

Как насчет замены способа позиционирования скроллбара на css transform (translateX/translateY) вместо свойств top/left для браузеров, которые поддерживают css transform?

Как в тех же образцах http://darsa.in/sly/#!examples http://darsa.in/sly/examples/fullpage.html

В каких-то местах это может уменьшить количество лагов

gromo commented 8 years ago

Не думаю, что лаги связаны именно с этим - там больше вероятность bottle neck в цикле в 300мс

Evangeline-Rei commented 8 years ago

Я это просто к тому, что это работает быстрее в любом случае

http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ ( https://habrahabr.ru/post/163645/ ), сам неоднократно проверил и использовал

Я говорю даже не о конкретном лаге скролла или его элементов, а про просадки фпс на тяжелых страницах

arturparkhisenko commented 8 years ago

@gromo what about https://medium.com/@paul_irish/requestanimationframe-scheduling-for-nerds-9c57f7438ef4#.t1zs6slz7 (replace 300ms cycle) with detach rAF callback on element destroy, or it'll would be better if this plugin will have an option what method it should use (like timer: 'setTimeout' //default or 'requestAnimationFrame'), also i'm not sure but maybe it'll require a something like throttling that. Also we can have option to use like: position-method: 'top-left' //default or 'transform' @gromo demo with current problem related to destroy (we need a method for that or it must be done automatically, or it's just a bug inside updateScrollbars function): http://codepen.io/ikeagold/pen/jALoQE

gromo commented 8 years ago

@Evangeline-Rei Наверное можно сделать, и я бы даже попытался, будь у меня свободное время. Но работа и семья на первом месте. Готов смержить Pull Request с изменениями ;)

gromo commented 8 years ago

@arturparkhisenko I'm not sure about rAF and not sure about mentioned issue. Why not call $('main').scrollbar('destroy'); before you remove element? updateScrollbars function is run even if no scrollbars are initialized - it's just like background task.

arturparkhisenko commented 8 years ago

@gromo about destroy, i got this error:

// line 128: this.scrollx.scroll.removeClass('scroll-scrollx_visible').find('div').andSelf()...
VM10061:1 Uncaught TypeError: this.scrollx.scroll.removeClass(...).find(...).andSelf is not a function(…)

andSelf is deprecated from jQuery version: 1.8, we should use addBack Maybe we'll switch to a new method and add a little fallback? it was removed in 3.0.0 Doc's: old andSelf and new addBack I can make a pull request, with a check to support old and new/future versions of jQ 🆕 ; Look at this pls, if you have a free time, currently i just can't disable already inited scrollbar (case with a modal dialog and i must prevent scrolling background behind it);

gromo commented 8 years ago

I'm going to update andSelf to addBack. Thank you for your report. I think it's better to change this line directly in your JS file for now.

arturparkhisenko commented 8 years ago

@gromo found in https://code.jquery.com/jquery-migrate-3.0.0.js

var oldSelf = jQuery.fn.andSelf || jQuery.fn.addBack;

jQuery.fn.andSelf = function() {
    migrateWarn( "jQuery.fn.andSelf() replaced by jQuery.fn.addBack()" );
    return oldSelf.apply( this, arguments );
};