I have a full width navigation div on the left hand side of an angular system.
I've successfully set an id on the <li> for the active page when doing a full page load.
This is all done within my navigation directive.
The div scrolls when there is a long list of items in it.
What I am trying to do is scroll to the active element within the div but am having no joy.
Within my directive I have successfully found the id using:
element.find('#exampleId');
but am not sure how to get just this div to scroll to the relevant id.
Any ideas?
This would scroll to the bottom of a div with the Id messagesContentElement
let messagesContentElement = document.getElementById('messagesContentElement');
messagesContentElement.scrollTop = messagesContentElement.scrollHeight;
So you need to get the scrollTop value right. Maybe you can calculate this based on a fixed cell height?
Related
I have a button with full width on amp page load and on scrolling the page, the full width button animates to a half width button on page. I have a href url in the anchor tag wrapping this button . Now, the issue is i wanted to change the url based on the button shown on page ( whether its a full widht / half width). This is all on a amp page . and the animation is handled using amp-animation and amp-position-observer.
please let me know how can i achieve this. I cant use amp-state mutation also on scroll.
I'm using ReactiveSearch 3.30.0.
Here's how I use the ReactiveList component in my Next.js project.
<ReactiveList
....
infiniteScroll={true}
showLoader={true}
pagination={false}
loader={<MyCustomLoader/>}
....
/>
The problem is during the loading that occurs,
When I click on a filter item
or
When Scroll more to the bottom
the MyCustomLoader is always at the bottom.
Expected outcome for the MyCustomLoader is,
When I click on a filter item => MyCustomLoader at top
and
When Scroll more to the bottom => MyCustomLoader at bottom
The reason is, since my results list is long and scrollable, the loader is not shown when I click a filter item. It is actually rendered on the DOM, because I could see it when zoomed out the browser window (but is outside visible area to the user).
Related GitHub issue https://github.com/appbaseio/reactivesearch/issues/749
Any workaround is highly appreciated. Thanks.
I have a bunch of div elements and in want to know if the scroll is at a particular element I am using a custom scrollbar implementation(react-custom-scrollbars).
Here's the working code.
https://codesandbox.io/s/7j28kmoy86
I have template message in image.
Can you help me set scrollbar at the bottom by default?
Use scrollIntoView() on the element you wish to display at the bottom. For example, for the last message of a chat you want to show :
elementMessage.scrollIntoView(true);
It will make the parent element scroll until your element is visible (here with the optional parameter alignToTop set to true, the element will be aligned at the top of the scrollable parent, or as high as possible if it's your last element).
The Javascript code below should keep your div's scrollbar positioned at the bottom like you described:
let objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
link below: Link here
Still learning ionic. I have a slide menu integrated into the app. The problem that I have is that I want to completely hide ionic nav bar and menu on top for my login view. I tried using ng-show to hide the nav bar based on whether or not current user is authenticated, but all it does is hide the content in the bar, but leaves empty nav bar container on top of the page.
I also tried using ng-if instead of ng-show, which does make the bar disappear completely, but when I need it to become visible again, the code produces an error: Cannot read property 'outerHtml' of null. I guess because the DOM object for the menu is not there anymore.
What is the best way to address this? Am I on the right path or is there a better way to show/hide