Trigger Knockout BindingHandler linked to KnockoutObservable on document.body.scrollTop

Question

I am attempting to trigger a Knockout BindingHandler as a direct result of the document.body.scrolltop value being greater or equal to a particular value. I have attempted to create an observable based on a statement. Firstly, is this possible? Or should I be updating the boolean result as part of a computed?

scrollPosition: KnockoutObservable<boolean> = ko.observable(document.body.scrollTop >= 200)

I have also tried:

scrollPosition: KnockoutComputed<boolean> = ko.computed(() => {
    if (document.body.scrollTop >= 100) {
        return true;
    }
    else {
        return false;
    }
});

The rest of the relevant code is:

HTML

<a href="javascript:void(0);" id="topLink" data-bind="topScroll: scrollPosition"><i class="glyphicon glyphicon-stats"></i></a>

CSS

#topLink {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background: rgba(72,72,72,1);
    width: 50px;
    height: 50px;
    display: none;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

BindingHandler

ko.bindingHandlers.topScroll = {
    update: function (element, valueAccessor) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.

        var value = valueAccessor();

        if (ko.unwrap(value)) {

            $(element).css("display", "block");
        }
    }
};

My aim is to display the back to top style link once the topscroll is beyond a particular value. Could someone point out where I am going wrong please?

score 2 · Answer 1 · edited May 23 '17 at 12:16

... Firstly, is this possible? Or should I be updating the boolean result as part of a computed?

scrollPosition = ko.observable(document.body.scrollTop >= 200)

You intend the scrollPosition to be dynamic. What you actually want is the body.scrollTop to be an observable. But it isn't. So strictly speaking: no, this is not possible.

What I'd suggest is to create a custom binding handler on the body element that detects when the user is scrolling (akin to this) and consequently updates an observable.

Here's pseudo code for how you'd use that in the view:

<body data-bind="changeOnScroll: shouldShowLink">

The custom binding handler could be like this (pseudo code):

ko.bindingHandlers.changeOnScroll = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here

        element.onscroll = function() {
            var obs = valueAccessor();
            obs(element.scrollTop > 200); // set the observable
        }
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.

        // Nothing here, since it's a one-way binding from DOM to observable.
    }
};

I've used onscroll, but you could also use jQuery if you have that available for normalized event handling.

Thank you very much for the response Jeroen. I think if I had spotted your explanation and answer earlier it would have been a quicker road to the resolution I have used! — Hicki, May 10 '16 at 12:46

score 1 · Accepted Answer · answered May 10 '16 at 12:44

I've found a solution I'm happy with prior to seeing the answer here from Jeroen. I have passed a fixed true to the BindingHandler data-bind.

<a href="javascript:void(0);" id="topLink" data-bind="topScroll: true"><i class="glyphicon glyphicon-stats"></i></a>

And then amended the BindingHandler to the following...

ko.bindingHandlers.topScroll = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        $(window).scroll(function() {

            if ($(this).scrollTop() >= 150) {         // If page is scrolled more than 150px

                $(element).css("display", "block");  // show the arrow
            } else {
                $(element).css("display", "none");   // don't show the arrow
            }
        });

        $(element).click(function () {      // When arrow is clicked
            $('body,html').animate({
                scrollTop: 0                       // Scroll to top of body
            }, 'slow');
        });

    }    
};

Trigger Knockout BindingHandler linked to KnockoutObservable on document.body.scrollTop

2 Answers2