Scrollreveal.js отказывется работать

134

09 августа 2019, 07:50

Преамбула: Попросили написать простой одностраничник, без админки. Быстро сверстал на бутстрапе, то что было нужно, и добавил анимацию появления секций (тот самый scrollreveal.js)

Всё замечательно работало примерно вот так.

<head>
  <script src="scrollreveal.min.js"></script>
  <script src="jquery.min.js"></script>
</head>
<body>
  <section class="animated">
  </section>
  <section class="animated">
  </section>
  <section class="animated">
  </section>
  <script>
    ScrollReveal().reveal('.animated');
  </script>
</body>

Амбула: позже, попросили пересадить эту страничку на ERP Odoo. Вот тут то и начались проблемы - scrollreveal.js перестал работать. Точнее перестал работать наполовину. Всем секциям с классом animated скриптом проставляется opacity:0, но когда секция попадает во вьюпорт, opacity секции не становится = 1, т.е. остаётся прозрачным.

Опытным путём выяснил, что онскролл события не работают вообще. Дописал маленький скрипт в код странички:

<script>
  window.onscroll = function () {
    console.log('qwe');
  };
</script>

Ничего не логгировалось. (Проверил тот же скрипт локально на html стрничке, вдруг где ошибся? Нет, локально лог пишется, онскролл работает).

Куда копать дальше, не знаю. Может у вас появятся какие мысли по этому поводу? Заранее спасисбо.

upd. Еще один момент header c абсолютным позиционированием в odoo почему-то ведёт себя как position:fixed (или stiky) остаётся приклеен к верху вьюпорта. (Опять же, ведёт себя нормально на простой html страничке). Не знаю есть ли здесь связь с проблемой выше, но может кого натолкнёт на правильную мысль.

upd2. Для того, чтобы odoo схавал страничку, нужно чтобы она была в xml. Код, в котором onscroll не работает выглядит так.

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
  <template id="myhomepage" inherit_id="website.homepage">
    <xpath expr="." position="replace">
      <t name="Homepage" priority="29" t-name="website.homepage">
       <!--Дальше всё как в работающем html-->
        <head>
        </head>
        <body>
        </body>
       <!--Ну и закрывающие теги для xml-->
      </t>
    </xpath>
  </template>
</odoo>

Answer 1

Скорее всего вы что-то забыли в вашем новом шаблоне myhomepage для Odoo. К примеру обязателен вызов <t t-call="website.layout">

Answer 2

Проблема была в потерянном <!doctype html>. Решение которое помогло мне, и возможно, поможет кому-то еще - объявить doctype в самом шаблоне:

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
  <template id="myhomepage" inherit_id="website.homepage">
    <xpath expr="." position="replace">
      <t name="Homepage" priority="29" t-name="website.homepage">
        +  <!--declare doctype-->
        +  &lt;!DOCTYPE html&gt;
        +  <!--declare doctype/-->
        <html>
        <head>
        </head>
        <body>
        </body>
        </html>
      </t>
    </xpath>
  </template>
</odoo>

П.с. Если вы опытный пользователь Odoo, то скорее всего сможете решить проблему правильно, "по-одушному". Я же с Odoo познакомился из необходимости и буквально несколько дней назад. Дополню свой ответ, когда найду другое, красивое, решение.