Instagram | A universal instagram clone built with Expo | Frontend Framework library

Instead of targeting the window you should target the messages box element to scroll:

I have found an answer on my question and since I already see one person in comment, for whom my answer will be useful, going to post it here.

In order to refresh valid token, we can use https://graph.facebook.com/oauth/access_token endpoint. So the request with params will be like this:

This would match the class attribute in a tags:

For accessibility purposes, it is recommended to always use the title attribute on an </code> to label/describe its content.</p> <pre class="lang-js prettyprint-override"><code><div data-testid="instagram"> <iframe title="Instagram embed" className="instagram-media ..." id="instagram- embed-3">

You can then test if the </code> element exists with the <code>getByTitle</code> query.</p> <pre class="lang-js prettyprint-override"><code>expect(screen.getByTitle('Instagram embed')).toBeInTheDocument(); </code></pre>

First, we create IG Container by hitting the endpoint.

I suggest a lookup table

you can achive that with filter_complex hstack Example:

The problem was that you put the .acontainer inside the second .acontainer. child inside the child.

We can seperate the two 'screen's by wrapping each in a div with class panel.

To make the slider scrollable, we have to apply white-space: nowrap to force it into a single line. To make scroll-snap work horizontally, set scroll-snap-type to x and make it mandatory (scroll-snap-type: x mandatory;). This means that:

The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.^MDN

We also set overscroll-behavior-x to contain which makes sure that no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

We then apply scroll-snap-align: center to .panel. To prevent the overflowing contents in the panels, we also apply white-space: initial.

Result:

https://jsfiddle.net/Spectric/j7br8h5a/

We can take it one step further by adding support for user drag to scroll.

For this, we don't actually need scroll-snap at all. We can do it with pure JS.

Add an event listener for mousedown that sets isDown to true. Record the last position of the mouse.

Add an event listener for mousemove that checks whether the user is currently dragging (isDown == true). If the user is, calculate the distance from the current mouse position and the last mouse position, increment the slider's scrollLeft by the difference, and set the last position to the current position.

Add an event listener for mouseup that sets isDown to false and checks whether the slider's current scrollLeft is bigger than half. If it is, we can use scrollIntoView() on one panel to smoothly scroll it into the viewport.

To prevent scrolling when an app is opened, we can store the status in a variable which we set it to true when one of the open app function is called and false when the closeApp function is called. In the mousemove listener we also check whether this variable is true.

_{Best viewed in full-page mode}