- I am tryng to fix a css bug for mobile screens
- when I click section 1 content opens and if i move till the bottom of the section one content and after that if I click section 1 content closes.
- but I dont see section 2 after that I see section 3 since the screen moves upwards.
- how to retain the section 2 in our screen.
- am I doing anything wrong with the scaleY property.
- providing the related code below
I used scrollIntoView but still not point to second one any idea???
I used window.scrollTo(0, 0) but still not point to second one any idea???
.television .chromecast .sun .sunItem > .bulb { overflow: hidden; transition: transform .5s, max-height .5s; transform: scaleY(0); box-sizing: border-box; max-height: 0; transform-origin: center top; } .television .chromecast .sun .sunItem.selected > .bulb { transform: scaleY(1); max-height: 100%; } 2 Answers
Answers 1
We need to invoke properly on the select function
onSelect() { this.props.onSelect(this.props.id); this.focusDiv(); } Answers 2
That's the expected behaviour. The scroll position is retained but you remove content from the top of the screen so you end up further down in the page.
It's always a bad idea to collapse the previous elements when expanding a new one, especially on mobile.
To fix that, you will need to script a scrolling to the top of the open section. That could easily be achieved using jQuery.ScrollTo() or something similar, but to be honest, I would just leave the previous sections open, unless the users have a tendency to scroll back up and that would require to much scrolling to get back to the top of the page. Other UX solutions like a scroll to top link might come in handy to solve that.
0 comments:
Post a Comment