I'm having a page with 2 scrollable views next to each other:
<ion-content>
<ion-scroll></ion-scroll>
<ion-scroll></ion-scroll>
</ion-content>
I want to programmatically scroll the first one, but it seems the scrollTo is only a method on ion-content (which I ofcourse can not scroll, I need to have the second one independant)
Is there any way to solve this?
update: added a plnkr to show what I need
If I am not mistaken you are trying to Scroll the Left Scroller and I see you have a view selector called leftCats.
So if you just change one line you will be able to scroll. Here is my code below:
NOTE: This is just plain javascript. It jumps to the scroll position. You can apply animation if you like later.
import {Component, ViewChild} from '#angular/core';
#Component({
templateUrl:"home.html"
})
export class HomePage implements AfterViewChecked {
#ViewChild('content') content;
#ViewChild('leftCats') leftItems;
constructor() {
}
scroll() {
//I want to scroll the left pane here
console.log('scroll');
this.leftItems.scrollElement.scrollTop += 50; // Change This Line
}
}
I have also forked it here: DEMO
Hope it helps.
Related
In my Gatsby app I have a page that includes a pagination component.
By default, the path is: '/?page=1' and clicking the pagination buttons changes to '/?page=2', '/?page=3' ...
I am "saving" the page number in the path because I want the browser to remember the page number the user was on previously, in case he clicks the go back button of the browser.
The problem with this approach is that every time the path is changed, the page automatically is scrolling to the top, and I do not want it to scroll to the top.
Does anyone know the way to prevent that?
This is the default Gatsby behavior (known as Scroll Restoration). You have exposed the useScrollRestoration hook in order to play with this behavior (and change it accordingly to your specifications). For example:
import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"
export default function PageComponent() {
const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)
return (
<ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
{countryList.map(country => (
<li>{country}</li>
))}
</ul>
)
}
In your case, you should add your element class name.
Related GitHub threads:
https://github.com/gatsbyjs/gatsby/issues/27349
https://github.com/gatsbyjs/gatsby/issues/19480
I have a custom Reactjs component to display Pagination with next/previous buttons at the bottom of a grid. Now, the business needs to display the same component on top of the grid as well. How to display the previous /next button events based on the input provided in prev/next buttons at the bottom of the grid?
I tried using javascript innerHTML to mimic the behaviour. It works only with the display. It does not attach the event listener of the buttons. I tried even with
document.querySelector.addEventListener('click', ()=>{console.log('test')})
It does not work. Is there a better way to do with react.
I am going to just add some more content to Shmili Breuer answer.
If i understood you correctly you have 2 navigations, one at the top one at the bottom. The way you connect them would be through a state of you component, or a parent component if you are using functional component to render pagination stuff. So if you change the state it will reflect on both of your navigations. Also you can use only one function here, by passing a parameter, im gonna copy a code from before mentioned answer.
// first create a function
nextFunction = (condition) => {
if(condition){
this.setState(prevState=>({
page: prevState.page-1
}))
} else {
this.setState(prevState=>({
page: prevState.page+1
}))
}
}
// then use it in your button
<button onClick={() => this.nextFunction(some condition)}>Next</button>
Just put that component on top and bottom
<Grid>
<Pagination />
{...someOtherComponents}
<Pagination />
</Grid>
it's ok in react. Optimization that you want to do is overhead.
In react you would add an onClick attribute to an element you want to handle a click on.
Something like this
// first create a function
nextFunction = () => {
do next functionality....
}
// then use it in your button
<button onClick={() => this.nextFunction()}>Next</button>
This way you can have both top and bottom pagination call the same function.
Hope this helps
calling updateLayout() is causing the parent container to "jump" to the top. Setting the viewconfig on the Ext.Container.container does not seem to help
viewConfig: {
preserveScrollOnRefresh: true
},
As suggested by Alexander, overriding beforeLayout and afterLayout for the parent container did the trick.
beforeLayout: function() {
var me = this,
scroller = me.getScrollable();
me.callParent(arguments);
if (scroller) {
me.savedScrollPos = scroller.getPosition();
}
},
afterLayout: function() {
var me = this,
scroller = me.getScrollable();
me.callParent(arguments);
if (scroller && me.savedScrollPos) {
scroller.scrollTo(me.savedScrollPos);
}
},
updateLayout is not the same as refresh, and preserveScrollOnRefresh only preserves scroll on refresh. You could look into ExtJS code how they did it (they don't really "preserve" scroll, they store the scroll position and scroll back to the correct position after refresh) and implement the same for updateLayout.
To cover more options for anyone having similar problems:
Changing the layout
As mentioned in question Avoid Ext.form validation scrolling to top, sometimes just changing the layout can do the trick.
For example form in ExtJS 4.x had anchor layout specified by default (ExtJS 6 has vbox), which caused the form to scroll to top on form field validation, if you change the layout to vbox, it does not scroll to top.
Suspending layout
If you have a component, that does not need to update the layout with its change, you can use the suspendLayout configuration.
I have a view of xtype container. If I swipe from left to right the view must change. It is more or less similar to carousel but I dont need carousel. I need to navigate between views with the help of swipe event.
listeners: {
painted:function(container) {
container.getContentEl().on('swipe',function() {
// your swipe code here
}
}
}
I have an MVC app which has a Tab Panel rendered as the only item in the viewport. Within the tabs I would like to put the same type of component, for which the event handling is equal within all tabs.
Therefore I need an ExtJS MVC Controller ref to the active tab, that would lead me to execute events on the components in the active tab. Is it possible to have such a ref?
My current approach is this:
get reference to Tab Panel
call getActiveTab()
call the controller events for the component in active tab
Is it possible to encapsulate the above 3 steps in one controller ref? Would be beautiful :-)
I'm using ExtJS 4.1.
Personally, I think controller refs are overrated. This sounds like a simple case where you can use one as you describe, but I prefer to listen to the event, and navigate from the firing component to the one I need.
In your case, assuming your tab panel contains regular ext panels, I'd do something like the following:
onButtonClick: function (button) {
var panel = button.up('panel[tab]');
if (panel) {
panel.someMethod();
}
}
The up method will find the closest ancestor that is of xtype panel and has a property named tab. If you have more specific xtypes or known properties, use those instead.
The panel should be the active one (else how was its button clicked?) but you can check that by going up another level to the tab panel and getting the activeTab there.
onButtonClick: function (button) {
var panel = button.up('panel[tab]'),
tabPanel = button.up('tabpanel'),
activeTab = tabPanel && tabPanel.getActiveTab();
if (panel && panel === activeTab) {
panel.someMethod();
}
}
Say your tabPanel has itemId: 'content'. Inside that panel you will have bunch of tabs and on each tab you will have bunch of buttons (as an example). And you want to handle all these button's click in one controller. Do I understand you correctly?
I believe that simple ref inside your controller would work:
this.control('#content button', {
click: this.buttonClicked
}
});