Skip ke Konten
Menu
Pertanyaan ini telah diberikan tanda
2 Replies
2617 Tampilan

Hi,

we use Odoo 14 and I would like to show a button in our website after certain scroll position. This basic JS code below calculates vertical scroll and when it reaches half of the window height, it adds active class to the button. So, it shows the button. When I run this code in an simple HTML project, it works but same code doesn't work in Odoo. Is there any idea that how can I do that?




window.addEventListener("scroll", (event) => {
​var scroll = this.scrollY;
​if (scroll >= window.innerHeight / 2 ) {
​document.getElementById("IdButton").classList.add("active");
​} ​else {
​document.getElementById("IdButton").classList.remove("active");
​}
});
Avatar
Buang
Jawaban Terbai

Hi,

Please refer to the code:

const publicWidget = require('web.public.widget');


    publicWidget.registry.ScrollButton = publicWidget.Widget.extend({

        selector: 'body',   // attach to body or a container

        start: function () {

            const button = document.getElementById("IdButton");

            if (!button) {

                return;  // stop if button not on page

            }


            window.addEventListener("scroll", function () {

                let scroll = window.scrollY || document.documentElement.scrollTop;

                if (scroll >= window.innerHeight / 2) {

                    button.classList.add("active");

                } else {

                    button.classList.remove("active");

                }

            });

        },

    });


Hope it helps.

Avatar
Buang
Jawaban Terbai

Hello George

Just a suggestion in odoo you can use this as a scroll event

$(document).ready(function () {

    let lastScrollTop = 0;

    const $button = $('#my-button'); // your button selector


    $('#wrapwrap').on('scroll', function () {

        let scrollTop = $('#wrapwrap').scrollTop(),

            windowHeight = $(window).height();


        console.log('Current scrollTop:', scrollTop);


        // Add 'active' class when scroll reaches half window height

        if (scrollTop > windowHeight / 2) {

            $button.addClass('active');

            console.log('Button shown');

        } else {

            $button.removeClass('active');

            console.log('Button hidden');

        }


        lastScrollTop = scrollTop;

    });

});


Avatar
Buang
Post Terkait Replies Tampilan Aktivitas
2
Jun 22
3800
1
Apr 22
2636
0
Feb 22
4866
1
Jan 22
2591
1
Jan 21
3367