تخطي للذهاب إلى المحتوى
القائمة
لقد تم الإبلاغ عن هذا السؤال
2 الردود
2467 أدوات العرض

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");
​}
});
الصورة الرمزية
إهمال
أفضل إجابة

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.

الصورة الرمزية
إهمال
أفضل إجابة

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;

    });

});


الصورة الرمزية
إهمال
المنشورات ذات الصلة الردود أدوات العرض النشاط
2
يونيو 22
3699
1
أبريل 22
2537
0
فبراير 22
4762
1
يناير 22
2502
1
يناير 21
3291