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

Question

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

358 Views Asked by Hicki At 05 April 2025 at 06:46

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?

Original Q&A

There are 2 best solutions below

Jeroen On 10 May 2016 at 11:25

... 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.

**Hicki** · Accepted Answer

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

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in KNOCKOUT.JS

Related Questions in BINDINGHANDLERS

Trending Questions

Popular # Hahtags

Popular Questions