Develop Reference

Turn both vertical and horizontal scrolling events into horizontal scrolling with HTML & JS

I'm developing a horizontal-scrolling portfolio website using React.js.
Essentially it's just a sideways picture gallery that you can easily scroll through using the trackpad.
Currently it all fits into a big container that uses:
overflow-x: scroll;
overflow-y: none;
-ms-overflow-style: none;
scrollbar-width: none;
Recently I realized that this site would be unusable for people who use a mouse and a desktop computer because as far as I know the mouse can't scroll sideways unless there's a scrollbar (which I don't want to add for aesthetic reasons) or some kind of y-to-x scroll conversion.
Now I'm trying to implement this scroll conversion in case users are unable to scroll horizontally. I found this solution but couldn't get it to work correctly:
const scroller = document.getElementById('pageContainer');
window.addEventListener('wheel', e => {
scroller.scrollLeft += e.deltaY;
});
The snippet above effectively breaks both ways of scrolling for me. The vertical scroll scrolls my page container to the left very slightly, about 1/12th the speed of normal scrolling if not less. The previously-working horizontal scroll now seems to "fight" with the other scroll and jerk the page into the correct direction or stutter it over.
What am I missing? What's the cleanest way to achieve this?
Ideally I'd like the scrolling to move side to side in a sinusoidal motion if I'm "scrolling" in a circular motion.
EDIT:
I've found a codepen that achieves the desired behaviour and implemented it:
https://codepen.io/aaaaaaaz/pen/OJpXBXM
It still didn't work but it gave me the idea to try an disable scroll-behavior: smooth; in my css – I was using it for buttons that would programmatically scroll you to further parts of the page faster.
The new question now is, is there any way for these things to work in tandem?

PLease add height and width in you div style
where you want add horizontal-scrolling on portfolio website
#content {
height: 100%;
width: 9000px;
}

Handling absolute layout with smartphone keyboard appearance

So, I have been trying to implement a landing page for mobile view that you can see here : https://i.imgur.com/4Ju5XGs.png
It works fine so far.
But as soon as the user wants to introduce his username and password, the keyboard from Android appears and my problem appears as you can see here : https://i.imgur.com/uT4LKrQ.png
My elements (the logo and the form) are placed via absolute position to keep the layout in place whatever the screen size is. I suspect this is my main issue.
Here is a really really quick pen to showcase what the problem is all about : https://codepen.io/Gallow/full/BeLWVG ( https://codepen.io/Gallow/pen/BeLWVG to see the quick code )
In order to make the android keyboard appear, you have to enable Toogle Device Toolbar from the chrome debug menu, then click to choose a device and click edit.
From there, a list will open and check Nexus 5X.
The procedure is described here : How to bring up mobile keyboard in chrome dev tools?
To toggle the keyboard, just click on the screen options (to change orientation) and pick Portrait - Keyboard
I think this might be the code in cause : (you can see the same code in the pen as well)
.logo
{
position : absolute;
z-index: 100;
width: 80%;
left: 10%;
top: 7.5%;
}
.container__action
{
position: absolute;
z-index: 100;
bottom: 5%;
width: 80%;
left : 10%;
text-align: center;
}
As you can see, everything is placed via absolute. As the keyboard appear, the size of the body decrease dramatically which cause the form to move up and place himself in front of the logo.
I can't find a proper way to apply this layout without using absolute to place the element, while making it works when the keyboard lower the size of the body.
Thanks a lot !

My suggestion would be to divide your CSS into two sections, one below very square-ish aspect ratio (like 1:1, you have to see what resolution you get on what aspect ratios) and set logo's display to none (that is pretty common solution while keyboard is visible).
If you don't know how to do this, see read here about #media query.
Another option (if you don't want to use #media query) is to listen for input's focus and blur events (focus means that input is selected, blur means that it is no longer selected) and toggle logo using javascript.

Google AMP amp-sidebar & fixed positioned z-index

I have a header with position:fixed and I'm trying to implement amp-sidebar component.
AMP is creating the -amp-fixedLayer adding style="top: calc(0px); pointer-events: initial; z-index: 10000;"
to fix scrolling performance in Safari ("[FixedLayer]" "In order to improve scrolling performance in Safari, we now move the element to a fixed positioning layer:" )
The problem is that since amp-sidebar component has a z-index:9999!important in their styles, the fixedLayer is displayed in top of the sidebar.
I thought about wrapping amp-sidebar and then I could add the z-index I want, but the parent tag for an amp-sidebar can only be 'body'
Any ideas how to fix this?

I just had the same issue and after fiddling a bit I found a way to edit the Z-index of my header.
Amp puts what z-index it thinks is needed but you can tweak those values. For instance:
header {
position: fixed;
z-index: -2000;
width: 100%;
background-color: black;
opacity: 0.7;
color: white;
}
This is the CSS code of my header, the trick here is to use a negative z-index. Amp will take its default value, add the z-index from the style (negative in this case) and put the result in the CSS.
So in my case the calculated z-index of the header is less than the sidebar's and therefore the sidebar gets on top of the header.
Hope this helps.

Fairly limited options
Considering that a portion of the intent behind amp is to push developers toward a UI standard (where the sidebar should always take the entire height of the window), you'll have to lightly break it.
note: Apparently jQuery is not an option.
Use margin on the sidebar
amp-sidebar {
margin-top: 10em;
margin-left: 5vw;
}
Ultimately, submit a bug report here:
https://github.com/ampproject/amp-by-example/issues/new
Roll your own amp
Submit a bug
Fork the github repo.
Patch the bug by setting the sidebar z-index higher.
Use your patched repo.
Submit a pull request to the master amp repo (fixes bug you reported).
That's really the right way to handle these scenarios.

How do you disable horizontal scrolling on a webpage?

How do you disable horizontal scrolling on a webpage?
I understand that this question has been asked many times before on stackoverflow (here, for example).
The most common answer says use CSS to set overflow-x: hidden; or max-width:100% for the html/body elements. However, these seem to hide the scrollbar but still allow the user to scroll with middle clicks, trackpad swiping, and touchscreen swiping. I'm looking for a solution that allows NO horizontal scrolling of any form.
The next most common answer says don't make your content wider than the screen. Maybe this is a good answer, but in general it's not very helpful and in my particular situation I don't know how to make my content fit.
Are there better methods for preventing horizontal scrolling?
To give you an idea of the problem that's motivating my question, take a look at http://www.tedsanders.com/BetTheBill/. So that you can see the problem better, I have highlighted the offending svg element in gray. When you click the green 'Bet The Bill' button, the svg rotates. If your window is small, the corners of the gray rectangle sometimes end up pointing off the screen and make horizontal scrolling possible.
I've tested this issue on the current versions of Chrome, Android Chrome, Firefox, and IE11. Only IE11 gives the behavior I want, with no horizontal scrolling.
Edit: Thanks to your helpful answers, I now have a solution. I'm going to implement it soon, but unfortunately that means my link above, originally meant to illustrate the problem, will no longer illustrate the problem. Sorry to all future visitors! (Perhaps in hindsight I should have made a fiddle. Although who knows how long that will even last...)
Edit2: Beware, the javascript solution below does not necessarily work on mobile browsers (in my version of Android Chrome there is significant jitter).
Edit3: Aha! My friend told me that overflow: hidden; will indeed work, but it needs to applied to the parent div and not the body or html or another ancestor. This looks like the best solution!

Try this:
html {
overflow-x: hidden;
width: 100%;
}
body {
overflow-x: hidden;
width: 100%
}
I believe overflow-x: hidden; will only stop the particular element that it is applied to from scrolling, so outer-more elements can still cause the window to scroll. Applying it to html and body should prevent anything which exceeds the width and height of window from causing the window to scroll.
Adding width: 100%; will force the html and body tags to be exactly 100% the width of the window.
But in your example that's not the problem. For some reason the <div class="container"> sometimes displays another set of scrollbars just for the container and the scrollbars appearing and disappearing is what causes the container's movement.
You can fix it by adding to following:
/* overflow: hidden; stops the second set of scrollbars */
/* I increased the width by 300px and added 150px padding on either side. This stopped the grey background from disappearing when the pie chart rotated. */
.container {
overflow: hidden;
width: 930px;
padding-left: 150px;
padding-right: 150px;
}

var offset = window.pageXOffset;
$(window).scroll(function () {
if(offset != window.pageXOffset)
window.scrollTo(0, window.pageYOffset);
});
Also do not forget to hide overflow.

Aha! My friend gave me an answer so I came back here to post it for all of you. overflow: hidden; will indeed work, if it is applied to the parent div and not the body or html or another ancestor. And unlike the javascript solution kindly provided by user3796431, it even works on mobile.

Very strange issue in IE9 with entire page jumping

EDIT: The client wants to do some testing with disabling the click and drag feature in IE, so at this current moment you will be unable to replicate the bug. I understand if this effects the communities ability to assist in fixing the ultimate underlying problem.
So here is the problem. It occurs in IE9 and IE8 when the screen height or more specifically the browser height is less than the height of the website main container. The website scrolls horizontally so its total height is somewhere around 700 or 800 pixels.
To reproduce this bug you have to open up this url: http://dev.gregoryfca.com/ in IE9 and make the height of the browser somewhere around 500 or 600 pixels. So this will force the page to start scrolling vertically top to bottom.
Keep it all the way to the top so you can still see the G logo and the menu as well as the social icons. Then click in the white area and dont let go. You can click in the white area next to the Our People section.
When you click start to drag your mouse to the right. This will start the page scrolling and allow you to use the horizontal scroll feature.
So here is the bug. In IE9 when the browser height is smaller than the total website height, when you click and drag in the middle section to scroll horizontally, the whole page jumps down vertically so that the absolute top of the screen is the top of the #drag-wrapper element.
I dont want the page to jump when you are scrolling horizontally. If you put together this same set of circumstances in Chrome or Firefox you will see this bug is not present there.
I think it has something to do with the way IE treats focused elements with certain positioning, or something like that. The site uses lots of jQuery as you will see.
Does anybody have any idea. I have basically exhausted everything I can think of.

try giving left and top property to this css class:
#drag-wrapper {
height: 610px;
margin: 35px 0;
overflow: hidden;
padding: 0;
position: absolute;
left:0;
top:150px;
width: 100%;
-moz-tap-highlight-color: rgba(0,0,0,0);
-moz-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
z-index: 4000;
}
As you can see this class has position:absolute but it doesn't have the left and top property. make margins to 0 if requires.