CODEWITHSUNDEEP
javascriptjquerycssdomknockout.js
Mike Flynn
Mike Flynn

Reputation: 24325

knockout.js and fixed left scrolling binding on element

I have this binding that goes on about 60+ rows. When I scroll left the lag is kind of slow and jumpy. Anyway to fix this or make it smoother?

<!-- ko foreach: Times -->
                    <tr class="time-games">
                        <td class="time-container" data-bind="fixedLeft: { }">
                            <div class="time">
                            </div>

    ko.bindingHandlers.fixedLeft = {
        init: function(element, valueAccessor) {

            var leftOffset = parseInt($(element).css('left'));

            $(window).scroll(function () {
                $(element).css({
                    'left': $(this).scrollLeft() + leftOffset 
                });
            });
        }

};

Upvotes: 2

Views: 602

Answers (1)

mash
mash

Reputation: 15229

Try using: 

$(element).css({
    transform: "translate3d(" + ($(this).scrollLeft() + leftOffset) + "px,0,0)"
});

jQuery > 1.9 will auto-fill the vendor prefixes for you depending on which browser is being used. Translate3d usually out-performs just setting the left property. You'll have to change your parseInt($(element).css('left')) to $(element).offset().left as well, to account for the lack of left css.

In addition, you can throttle the function (underscore.js provides a nice way of doing this) in order to keep performance the same even if many events are fired very quickly. You could use css3 animations to make up for the loss in accuracy in between each function call if it ends up looking choppy.

Upvotes: 1

Related Questions