ما هي أفضل طريقة لتذكر موضع التمرير في الصفحة الرئيسية (الفئات)؟

مطور
1

أرى أن العديد من الصفحات في Discourse تتذكر موضع التمرير.
لكن صفحة التصنيفات تفتح دائمًا في الأعلى. وفي الحالات التي تكون فيها الصفحة الرئيسية وتحتوي على العديد من التصنيفات، فإن ذلك لا يوفر أفضل تجربة مستخدم.

على سبيل المثال، رأيت هذا الالتزام (commit) من @markvanlan: FEATURE: Remember scroll position in private message lists by markvanlan · Pull Request #8212 · discourse/discourse · GitHub
هل تعرف ما هي أقصر طريقة لتحقيق نفس الشيء لصفحة التصنيفات؟

كما أفهم من هذا الموضوع القديم:

فإن فريق التطوير يفضل أن تظل صفحة التصنيفات تفتح في الأعلى، بعكس الصفحات الأخرى.

لذلك، ربما يكون من الأفضل إيجاد طريقة لتطبيق إصلاح تمرير التصنيفات كمكون موضوع منفصل. ما هي أفضل طريقة في رأيك؟

أو ربما قام شخص ما بذلك بالفعل؟

شكرًا لك!

2

أعتقد أنه يمكن تحقيق ذلك باستخدام مكون السمة. لست متأكدًا من مستوى خبرتك التقنية، لكن يمكنني تقديم مخطط عام لكيفية إنجاز ذلك.

باستخدام واجهة برمجة التطبيقات onPageChange، يمكنك التحقق مما إذا كانت الصفحة الحالية هي صفحة التصنيفات. إذا كانت كذلك، فراجع localStorage لمعرفة موضع التمرير الأخير للمستخدم على الصفحة، ثم انتقل إلى ذلك الموضع إذا كان موجودًا. عند هذه النقطة، أضف مستمع أحداث للنافذة لتخزين موضع التمرير الخاص بالمستخدم في localStorage. في onPageChange، إذا لم يكن المستخدم على صفحة التصنيفات، فقم بإزالة مستمع الأحداث.

3

شكرًا لك @markvanlan - سأحاول.
أنا مبرمج ولكن بخبرة أقل في الواجهة الأمامية.

يرجى إبقاء هذا الموضوع مفتوحًا لبعض الوقت - ربما يكون هناك شخص ما قام بذلك بالفعل.

4

حل سريع وغير نظيف للآن - ربما قد يفيد شخصًا ما لاحقًا.

<script type="text/discourse-plugin" version="0.8">

api.onPageChange((url) => {
    window.removeEventListener("scroll", saveScroll, {passive: true,});
    
    if (url === "/" || url === "/categories"){
        restoreScroll();
        window.addEventListener("scroll", saveScroll, {passive: true,});
    }
});


function restoreScroll() {
    var pos = sessionStorage.getItem("categoriesScrollPosition");
    if (pos != 0) {
        window.scrollTo(0, pos);
    } 
}

function saveScroll() {
    if (window.scrollY != 0) {
        sessionStorage.setItem("categoriesScrollPosition", window.scrollY + 1);
    }
}
</script>