Skip ke Konten
Menu
Pertanyaan ini telah diberikan tanda
2 Replies
2769 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
3967
1
Apr 22
2744
0
Feb 22
4989
1
Jan 22
2685
1
Jan 21
3461