Skip to Content
เมนู
คุณต้องลงทะเบียนเพื่อโต้ตอบกับคอมมูนิตี้
คำถามนี้ถูกตั้งค่าสถานะ
2 ตอบกลับ
2460 มุมมอง

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;

    });

});


อวตาร
ละทิ้ง
Related Posts ตอบกลับ มุมมอง กิจกรรม
Can't edit web event page แก้ไขแล้ว
2
มิ.ย. 22
3695
1
เม.ย. 22
2533
0
ก.พ. 22
4759
1
ม.ค. 22
2500
1
ม.ค. 21
3290