Verwenden Sie $ location und $ anchorscroll, um eine Tabellendaten (TD) in die Anzeige zu scrollen ⇐ HTML

[Anonymous]

In meiner Angular JS -Webanwendung, die auf einem TV -Browser ausgeführt wird, habe ich ein horizontales Menü. (Sie können das Menü und das Problem sehen, das ich auf den Fotos habe.) Ich verwende $ location.hash und $ AnchorsCroll, um dieses Menü zu scrollen. Wenn jedoch auch ein winziges Pixel der Menüelemente in der Tabelle ganz rechts oder links sichtbar ist, führt AnchorsCroll das Scrollen nicht durch. Wenn ich jedoch zu den nächsten unsichtbaren Tabellendaten wechsle, funktioniert das Bildlauf gut.





{'background':(vm.selectWelcomePage != 'welcome1' ? (guide.guideMenuNoneSelectTextColor) : 'white'),
'color':(vm.selectWelcomePage != 'welcome1' ? (guide.guideMenuSelectTextColor) : 'black'),
'border-radius':'30px'} || {}" style="width: 350px;
grid-template-columns: max-content max-content 1fr;">{{item.NM}}






< /code>
vm.scrollCatMenu = function () {
$location.hash("guide-item-cat-" + vm.selectedGuideIndex);
$anchorScroll();
vm.logInfo('scrollCatMenu', 'Scroll Cat Menu Worked Properly.')
};
< /code>
How can I make the scrolling process ensure that the entire td element is visible?
expected scrolling
menu that cannot be scrolled
To resolve this, I added $timeout inside my scrollMenu function and performed the operation here, but nothing changed. To equalize the sizes, I increased the size of the td elements, but again, nothing changed. In any case, even if the td edge to be scrolled is visible, anchorScroll does not perform any scrolling operation.
When I add a static empty span with the same ID as the first TD's ID at the very beginning of the TDs, the page at least opens with the scroll position set to the first menu. I tried the same solution by adding a span after the last TD, but it didn't work.