Sticky Scroll Element

[rminderhoud]

Hello, we have started to convert our UI for https://www.roseonlinegame.com to RmlUi. We recently converted a window that contains table data and we wanted to be able to have "sticky" columns and a "sticky" header. Through careful usage of flex boxes we got the layout mostly there but there was no built-in functionality for "sticky"-ness. We ended up creating a custom element to support this that enables elements to be "sticky" relative to some parent that has overflow + scrolling but also enables scrolling the inner content of the sticky element based on the scroll location. This gives us a nice table effect. The code ended up being fairly simple for this element so I thought I'd share in case others found it useful. Here's the end result:

2024-09-25-00-12-21-capture.mp4

Some highlights:

• Middle panel is sticky to the container, even though container scrolls it stays in place
• Middle panel contents are scrolled by the scrollbar on the whole area
• Header is sticky at top of middle panel
• Scrolling middle panel on X-Axis also scrolls the header panel

This gives us a nice table effect. The code ended up being fairly simple for this element so I thought I'd share in case others found it useful:

#pragma once

#include "RmlUi/Core/Element.h"
#include "RmlUi/Core/EventListener.h"

class StickyScrollElement : public Rml::Element
{
   public:
    StickyScrollElement(const Rml::String& tag);
    virtual ~StickyScrollElement();

    // Rml::Element overrides
   protected:
    void OnAttributeChange(const Rml::ElementAttributes& changed_attributes) override;
    void OnRender() override;
    void OnUpdate() override;

   private:
    void update_target(const Rml::String& selector);

   private:
    Rml::Element* m_target = nullptr;

    float m_last_offset_top = 0.0f;
    float m_last_offset_left = 0.0f;
    float m_target_last_scroll_top = 0.0f;
    float m_target_last_scroll_left = 0.0f;
};

#include "sticky_scroll_element.h"

#include "RmlUi/Core/ElementDocument.h"

constexpr const char* ATTR_SCROLL_LEFT = "sync-scroll-left";
constexpr const char* ATTR_SCROLL_TOP = "sync-scroll-top";
constexpr const char* ATTR_STICKY_LEFT = "sticky-left";
constexpr const char* ATTR_STICKY_TOP = "sticky-top";
constexpr const char* ATTR_TARGET = "target";

StickyScrollElement::StickyScrollElement(const Rml::String& tag) : Rml::Element(tag) {}

StickyScrollElement::~StickyScrollElement() {}

void StickyScrollElement::OnAttributeChange(const Rml::ElementAttributes& changed_attributes)
{
    Rml::Element::OnAttributeChange(changed_attributes);

    for (const auto& [name, value] : changed_attributes)
    {
        if (name == ATTR_TARGET)
        {
            update_target(value.Get<Rml::String>());
        }
    }
}

void StickyScrollElement::OnRender()
{
    Rml::Element::OnRender();

    if (!m_target)
        return;

    Rml::Vector2f offset = GetRelativeOffset();

    float target_scroll_top = m_target->GetScrollTop();
    float target_scroll_left = m_target->GetScrollLeft();

    bool target_scroll_top_changed = (target_scroll_top != m_target_last_scroll_top);
    bool target_scroll_left_changed = (target_scroll_left != m_target_last_scroll_left);

    // Stick this element to the top of the target element
    if (GetAttribute(ATTR_STICKY_TOP) && target_scroll_top_changed)
    {
        offset.y += (target_scroll_top - m_target_last_scroll_top);
        SetOffset(offset, GetOffsetParent());
    }

    // Stick this element to the left of the target element
    if (GetAttribute(ATTR_STICKY_LEFT) && target_scroll_left_changed)
    {
        offset.x += (target_scroll_left - m_target_last_scroll_left);
        SetOffset(offset, GetOffsetParent());
    }

    // If the sticky target has scrolled up/down, optionally sync the scroll
    // location of our element as well
    if (GetAttribute(ATTR_SCROLL_TOP) && target_scroll_top_changed)
    {
        SetScrollTop(target_scroll_top);
    }

    // If the sticky target has scrolled left/right, optionally sync the scroll
    // location of our element as well
    if (GetAttribute(ATTR_SCROLL_LEFT) && target_scroll_left_changed)
    {
        SetScrollLeft(target_scroll_left);
    }

    m_target_last_scroll_left = target_scroll_left;
    m_target_last_scroll_top = target_scroll_top;
}

void StickyScrollElement::OnUpdate()
{
    Rml::Element::OnUpdate();

    // Warning: It's going to keep looking until the target exists or the target
    // attribute names a valid element. Might impact performance in that situation.
    if (!m_target)
    {
        Rml::Variant* value = GetAttribute(ATTR_TARGET);
        if (!value)
            return;

        update_target(value->Get<Rml::String>());
    }
}

void StickyScrollElement::update_target(const Rml::String& target)
{
    Rml::ElementDocument* doc = GetOwnerDocument();
    if (!doc)
        return;

    m_target = doc->QuerySelector(target);
}

};

BYOS - Bring your own stylesheet!

<div id="scoreboard">
    <!-- Headers-->
    <div>
      <div>
        <p data-for="headers_left">>
          {{ it }}
        </p>
      </div>
      <sticky-scroll target="#data-center" sync-scroll-left="true">
        <p data-for="headers_center">
          {{ it }}
        </p>
      </sticky-scroll>
      <div >
        <p data-for="headers_right">
          {{ it }}
        </p>
      </div>
    </div>

    <hr />

    <!-- Data-->
    <div id="data-container">
      <div id="data">
        <div>
          <div data-for="data: data_left">
            <p data-for="value: data">{{ value }}</p>
          </div>
        </div>
        <sticky-scroll
          id="data-center"
          target="#data-container"
          sticky-top="true"
          sync-scroll-top="true"
        >
          <div data-for="data: data_center">
            <p data-for="value: data">{{ value }}</p>
          </div>
        </sticky-scroll>
        <div>
          <div data-for="data: data_right">
            <p data-for="value: data">{{ value }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

[mikke89]

Hey, that's awesome! I've never tried anything like this myself, so it's great to see it working out. The solution looks quite elegant.

Thanks a lot for sharing, I'm sure this can be useful to others too.

Your project looks very interesting, looking forward to following updates. Feel free to continue posting screenshots as things develop :)