I'm currently developing a React project using Gatsby in which the page is scrolled inside the main element, and the main element contains sections that snap on scroll (using the scroll-snap-type/scroll-snap-align properties in css). The structure of my site is as follows:
<body>
<div id="___gatsby">
<div tabindex:"-1" id="gatsby-focus-wrapper" style="outline: none;">
<main>
<section></section>
<section></section>
<section></section>
</main>
</div>
</div>
</body>
For some reason, having the page scroll inside the main element removes my ability to scroll using the arrow keys, and the issue seems to be with #gatsby-focus-wrapper which is added by #reach/router for accessibility reasons.
After some experimentation I found a hacky solution: removing the tab-index property from #gatby-focus-wrapper or setting tabIndex: {-1} on my main element. This allows me to scroll with the arrow keys after making the main element active by clicking the page, which isn't ideal but it's much better than not being able to use the arrow keys at all.
The following snippet demonstrates this same behaviour (you can't scroll with arrow keys without first clicking the page), but if you copy this code into a new Gatsby project (minus the gatsby wrapper elements of course) you won't be able to scroll using the arrow keys at all without using one of the methods I described above:
html {
height: calc(100vh - calc(100vh - 100%));
}
body {
margin: 0;
}
body, #___gatsby, #gatsby-focus-wrapper, main {
height: 100%;
}
main {
overflow: hidden scroll;
scroll-snap-type: y mandatory;
}
.blue, .green, .yellow {
height: 100%;
scroll-snap-align: start;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
<div id="___gatsby">
<div id="gatsby-focus-wrapper" tabindex:"-1">
<main>
<div class="blue"></div>
<div class="green"></div>
<div class="yellow"></div>
</main>
</div>
</div>
Is there a way to make the main element active by default to fix this? And if so would this break my site for screen readers? Or maybe some built in Gatsby functionality that I'm not taking advantage of?
Related
This is what I want to accomplish
The code is already here, but i do not know how to make it stop at each section.
https://codepen.io/ellie_html/full/dyYjZyB
the part of the css that makes the code above work is this
.container {
height:570px;
width: 325px;
overflow-y: scroll;
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(3rem);
scroll-snap-type: y mandatory;
position: relative;
left: 510px;
top: 50px;
z-index: 1;
border-radius: 15px;
border: none;
}
.tiktok {
height: 620px;
width:300px;
background-color: black;
scroll-snap-align: start;
}
A vertical carousel scroller just like above, except, it must stop on each section instead of allowing the use to quicky scroll over each section.
I notice google shorts https://www.youtube.com/shorts/3jqhfmUqgZk behave the same way if you scroll down.
Snappy and crisp to the feel. However it also doesnt allow it to stop on each section. If a user scrolls very fast, it will skip over many.
How can this be done in javascript? I have looked at many libraries so far but they all suffer from the same problem. I am trying to modify the code above to make it work.
Or am i recreating the wheel and there is some tiny code out there that already does this?
I ended up using this library https://mobius1.github.io/Pageable/#page-1
Set it up in freescroll mode and dragmode. Its also free with no cost, and the snap feel of the scrolls is similar.
It is also done in pure javascript with zero dependencies.
Setting it in drag mode also prevents multiple sections from being skipped because a user wont be able to use the scroll wheel.
Have you tried fullpage.js? You can check its official docs here.
fullPage is an Open Source application licensed under a GPLv3 license. This license allows you to use fullPage in Open Source projects but it requires your project to be public, provide attribution and be licensed under GPLv3.
Here's a contrived example, also available on CodePen:
new fullpage('#fullpage', {
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
// get your license at https://alvarotrigo.com/fullPage/pricing/
licenseKey: 'YOUR LICENSE KEY HERE '
});
.section {
text-align:center;
font-size: 3em;
}
.as-console-wrapper {
display: none!important;
}
<link rel='stylesheet' href='https://unpkg.com/fullpage.js/dist/fullpage.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.11/fullpage.min.js"></script>
<div id="fullpage">
<div class="section">Section 1</div>
<div class="section">
<div class="slide" data-anchor="slide1">Slide 2.1</div>
<div class="slide" data-anchor="slide2">Slide 2.2</div>
</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
I'm stuck at some point. I'm trying to do a three-column page layout. The Middle section is for posts, the right section is for some other links and references and so (A bit long). Left is fixed.
My question is;
How can I stop the right div from moving when it reaches its bottom? And if the middle div's content is shorter then the right also has a scrollbar for the page for the right div. Just like Twitter does.
I tried to do some brainstorming. And thought maybe Twitter makes double divs for those sections. One is normal, the other is the fixed bottom it. So normal one stretches the page for scrolling, and the other one sticks on top of it. But I'm not sure if I'm right.
Or is it possible with pure CSS? (Also I'm using TailwindCSS)
Anyway; here is a presentation of my thought. (Or you can simply look at twitter homepage feed)
Also here is a gif;
click
You can use the following CSS code in the element which needs to stop
position: sticky;
bottom: 0
Refer to the following post on Stackoverflow for more information How does the "position: sticky;" property work?
Hope this answers your question!
Edit: [Try this out]
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}
<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>
Pretty common question, and typically revolves around a current situation, so after reading up on a bunch of different solutions and trying to slide them in I thought I'd just ask the age old question myself based on my situation.
Situation
I've built a little page slider using jQuery, and it appears to work as expected, then I noticed the CSS height was still set to a default value I had used for testing. After removing it I can't seem to get the height of the parent to open to the height of the different children. I know that setting the position of the different divs to relative instead of absolute will display them, but then the divs aren't positioned correctly anymore (situated underneath each other). Other solutions I've found revolve around not using markup that is even remotely common to my own.
Question
Is there a CSS fix for this that allows me to leverage Bootstrap the way I have it set up, and the jQuery animation I've already written? Or is their any suggestion(s) that will make this work without too much alteration to the markup? I've tried a couple different variations and this seems to be the most stable.
Code
I've added it to a jsFiddle. I couldn't get the animation to work in the fiddle for some reason (works on my laptop in all browsers), but the default layout should be enough to see how the parent doesn't respect the child elements.
<style>
.container {
margin-top: 50px;
}
.row {
margin-bottom: 20px;
}
.windowBox {
overflow: hidden;
}
.box {
background-color: #FFF;
position: absolute;
width: 100%;
}
.page1 {
top: 0;
left: 0;
opacity: 1;
z-index: 999; /* set to be over page2 onload */
}
.page2 {
top: 0;
left: 0;
opacity: 0;
z-index: 99; /* set to be under page1 onload */
}
</style>
<div class="container">
<div class="row">
<div class="col-sm-12">Header text should be above either page.</div>
</div>
<div class="row">
<div class="text-center">
<button type="button" id="showPage1" class="btn btn-danger" disabled>Page 1</button>
<button type="button" id="showPage2" class="btn btn-primary">Page 2</button>
</div>
</div>
<div class="row">
<div class="col-sm-12 windowBox">
<div class="row">
<div class="box page1">
<div class="hidden-xs col-sm-6">...</div>
<div class="col-sm-6">...</div>
</div>
<div class="box page2">
<div class="col-sm-12">...</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">Footer text should be under either page.</div>
</div>
</div>
DEMO
Added an .over class to your markup.
Thats the only change made there.
css
Over class is the container of the windowBox.
We want this to have a hidden overflow because it will contain all our pages side by side.
.over {
overflow: hidden;
}
This is a fixed value unfortunately. Basically its the width of your window X pages. If your going to add more then just one page, you can set this value in JavaScript.
.windowBox {
width: 220vw;
}
Then we simply set the container to be a "kind of" fixed width.
responsive width.. so 95 of view port width is reasonable.
.box {
background-color: #FFF;
width: 95vw;
display: inline-block;
float: left;
}
And in the JavaScript instead of setting the left property you set the margin-left.
You only need to do this for the first element so. If you want to scroll to page 4 you can set the first pages margin to -4 * 95vw
On my website i have a gray test image and i need to position it next to my image slider. I have tried putting them in the same div but it hasnt worked out as well as i though it would. Could someone show me how to do this within my code. I am new so i am confused with this more than others would be.
Thanks!
My website: http://rootforsite.azurewebsites.net/
Press f12 for code. The image slider and the image are near the bottom.
You can change the div css to include (in this case it should be the div with the id "containers" I think)
display: inline-block;
or since you're using lovely bootstrap you can add classes to both the divs to keep them lovely and gridified! :)
E.g.
<div id="container" class="col-xs-6">...</div>
<div id="containers" class="col-xs-6">...</div>
HTML
<div id="container">
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS
#container
{
width: 300px;
height: 300px;
background-color: yellow;
}
.inner
{
width: 100px;
height: 100px
float: left;
background-color: blue;
}
I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.