We have a long article list that are created every day like medium & we also care about the UX.
\nWe are also using:
Everything went right for the first time till we realized a problem that make poor UX. The normal user behaviors something like:
\nWhat if we select an article at page 5, that makes no sense since we have to scroll to page 5 & continue our work.
\nIt's bad UX for the current behavior, right? I can see this problem can easily solve with SPA approach & it's too late to modify something at the architecture level. To overcome this bad UX, we keep monitoring the current position on GUI & scroll to that position if any.
\nOK, let's move on to the implementation details
\nFirst, monitor the scroll position while scrolling & scroll to that position after loading page
\nfunction _trackViewedItem(item) {\n window.ggjLastNaviItem = {id: item.id, page: item.page}\n let sp = new URLSearchParams(location.search)\n sp.set('tr', `${item.id}_${item.page}`)\n history.replaceState(\n {},\n '',\n location.pathname + '?' + sp.toString())\n}\n\nfunction ioNaviItem(itemCls, itemImgCls, matchPoint = .5, threshold = [.5, .75, 1.0]) {\n this.$nextTick(() => {\n let io = new IntersectionObserver(entries => {\n if (window.ggjPreventScrollEvent) return\n // If intersectionRatio is 0, the target is out of view\n // and we do not need to do anything.\n let ir = entries[0].intersectionRatio,\n direction = this.lastIntersectionRatio < ir\n if (ir >= matchPoint && ((window.ggjScrollDirection == 'down' && direction) ||\n (window.ggjScrollDirection == 'up' && !direction))) {\n _trackViewedItem(this.item)\n }\n this.lastIntersectionRatio = ir\n }, {threshold})\n // start observing element\n io.observe(this.$el)\n\n // try to scroll to that element after this element mounted into dom\n function scrollToEl() {\n let tr = new URLSearchParams(location.search).get('tr')\n if (!window.ggjPreventScrollEvent && tr && /^\\d+_\\d+$/.test(tr) && tr.split('_')[0] == this.item.id) {\n window.ggjPreventScrollEvent = true\n let el = $(this.$el)\n window.scrollTo(0, el.find(itemCls).offset().top - el.find(itemImgCls).height())\n this.$el.scrollIntoView()\n setTimeout(() => {\n window.ggjPreventScrollEvent = false\n })\n }\n }\n\n scrollToEl.call(this)\n\n // special treatment for safari on mac\n // safari does not reload page when using back button\n // need to scroll to el manually\n if (/mac/i.test(navigator.userAgent) && /safari/i.test(navigator.userAgent)) {\n window.addEventListener('pageshow', event => {\n if (event.persisted) {\n scrollToEl.call(this)\n }\n })\n }\n })\n}It watches each article item & up-to-date value at query param
\nIntersectionObserver observe each article element visible on GUIwindow.history retain the info at query param, it contains 2 infos:
load event & normal browser will reload the page whenever you click back button to move back the list screen, Safari did not work as expected, it will load from cache instead of actually reload the page, by using pageshow event we can deal with it.Finally, we need to deal with receiving data & appending data when scrolling. The idea behind, we load only data for the current page, then load page +/- 1 in case scroll up/down.
\nThe algorithm to detect scroll up/down is quite simple, by comparing between previous & current scroll position
$(window).on('scroll', scrollDirection)\n...\nfunction scrollDirection() {\n // detect scroll direction\n let st = window.pageYOffset || document.documentElement.scrollTop\n // value can be true downscroll | false upscroll\n window.ggjScrollDirection = st > window.ggjLastScrollY ? 'down' : 'up'\n // For Mobile or negative scrolling\n window.ggjLastScrollY = st <= 0 ? 0 : st\n}then, we will define 2 boundaries, whenever user scrolls exceed these boundaries, it will trigger to get data according to that page
\npage - 1page + 1