Skip to content
This repository has been archived by the owner on Jan 13, 2022. It is now read-only.

keyboard scrolling only works on foccusable elements #27

Open
hanspoo opened this issue Jan 18, 2020 · 2 comments
Open

keyboard scrolling only works on foccusable elements #27

hanspoo opened this issue Jan 18, 2020 · 2 comments

Comments

@hanspoo
Copy link

hanspoo commented Jan 18, 2020

Hi,

Thanks for the great job, it looks very nice and the online editing is cool.

I've tested on firefox and chrome in the desktop.

The problem is that when i focus on the page content with a click, and then use the keyboard arrow keys or page up and page down to scroll, it doesn't do anything, I've been debugging the page for a while not finding a solution.

To reproduce
click the home page
press arrow keys to scroll down

expected: page scroll down
result: nothing happens

It doesn't work in the official starter demo https://tina-starter-grande.netlify.com/

It works when clicking on focusable elements like buttons or tabs scroll works, but in any other part of the page it doesn't.

Thanks

@hanspoo
Copy link
Author

hanspoo commented Jan 19, 2020

I've found the problem, it was a css rule in siteLayout.js component, this fix, this the change required:

hans@urantia:~/gatsby/aprende-react$ git diff
diff --git a/src/components/siteLayout.js b/src/components/siteLayout.js
index c3da21d..c84e113 100644
--- a/src/components/siteLayout.js
+++ b/src/components/siteLayout.js
@@ -109,7 +109,7 @@ export const Site = styled.div`
   ${props =>
     props.theme.hero.parallax &&
     css`
-      height: 100vh;
+      /* height: 100vh; */
       overflow-y: auto;
       overflow-x: hidden;
       perspective: 1px;

@spbyrne
Copy link
Contributor

spbyrne commented Jan 20, 2020

Thanks for reporting this, @hanspoo. I'll try that fix out locally and get it merged in soon if it checks out.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants