I've got the little bit of below code running horizontal scroll on 2 pages on my website
<script>
// mouse wheel horizontal scroll
const scrollContainer = document.querySelector("main");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
</script>
The issue is that when you are using a trackpad, your first thought is to move sideways, but as it is currently you have to move up and down to scroll horizontal.
Is there aa way to turn this off for if someone is using a trackpad? Or any alternative suggestions?
Bonus if it can be turned of for mobile display size, as horizontal isn't used here. Touch screen scrolling works but if you are using a scroll wheel it doesn't scroll up and down becasue of this code. (Realise it's very unlikily anyone would be using a mouse at tablet mobile screen sizes)
I'm expecting the trackpad to be able to move left to right and scroll through horizontally, while still keeping scroll wheel working horizontal, but only on two pages of the website.
Related
I have a modal that has a horizontal scrollbar when the modal is resized on small screens. When that horizontal scrollbar appears, the vertical scrollbar disappears because it is stuck to the right. I would like the vertical scrollbar to stay at the right side of the modal while I scroll horizontally to the right. A picture of this behavior is show below. I want the vertical scrollbar stuck on the right while I horizontally scroll to the right rather than only being present when I finish horizontally scrolling to the right.
Is there a way to accomplish this? I believe another issue is that on Windows devices the scrollbar takes up space unlike in Mac devices.
You can customize the scrollbar a bit (see https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp), however, I don't know if you can change the position.
I did find a javascript scrollbar-plugin, which I haven't tried, but maybe it is worth a try? You can find it at https://grsmto.github.io/simplebar/.
Is there a github or open source project which is a horizontal slider/swiper like on the google Films page?
Live Demo: https://www.google.at/search?q=films
I did a research but could not found the same behavior because this swiper does not force you to drag, on the desktop, you also can use the vertical scroll wheel and if you use the next button, it jumps to the next x elements and calculates how much it can skip depending on the screen size. Also the elements does not snap in place which is great I think, if you swipe. The cover is under your fingertip and moves as you swipe and does not do an animation or moves and snap in place, you just can swipe along.
and if you have js disabled, at least you can use the scroll wheel :)
Thx for help and tips.
I'm trying to create a site that has a parallax type effect with scrollTo navigation control.
Similar to http://www.nike.com/jumpman23/aj2012/ however I only need to scroll on left and right (up & down). I can do horizontal and vertical parallax, and scrollTo I just cant get the diagonal parallax working (with mouse scroll)
I've currently got it working using scrollTo however this disables the user being able to scroll with the mouse. I'm creating a dynamic one page site so some times a pages content may be longer then other areas so the user will need to scroll down, once they reach the end of this content the parallax effect kicks in.
Can anyone suggest a way to do this? Or point me in the right direction.
Let's say I'm on the standard iPhone 4.
My menu bar is 2000px in width. When the user touches and holds on the menu div, he can move his finger left/right, and the menu bar will move. This allows the user to browse all of the menu's items using his finger. (Scrolling left/right)
How can I make that in javascript/jquery?
It's like the Google Images webview (go there on your phone). You're able to swipe left and right to navigate each image.
Except...I want it to be a menu bar, with no "snapping".
Here's a very very basic example. It should get you moving in the right direction though.
$('body').bind({
'touchmove': function(e){
$('.menu_bar').css({
'left': e.originalEvent.touches[0].pageX
});
}
});
To get where you're headed you'll need to also store the touchstart coordinates, the .menu_bar start position and then use a bit of math to move the bar relative to it's position rather than just snapping to the finger position each time like the example above will do.
Hope that helps :)
I'm still a little confused by the question but I believe the answer is just to use
-webkit-overflow-scrolling: touch;
This will work for iOS5 devices and give you a small scroll bar when active (i.e. when scrolling)
Otherwise you could try this plugin: http://cubiq.org/iscroll-4
Or: http://chris-barr.com/index.php/entry/scrolling_a_overflowauto_element_on_a_touch_screen_device/
(which is multi-device)
We have developed a site whcih has a horizontal orientation and are wanting to implement touchpad control with two fingers move left/right.
When you move two fingers left/right on touchpad, the site page is being scrolled left/right. Now we have implemented touchpad control with two fingers move up/down and page scrolled left/right.
How can we change touchpad control with two fingers move from up/down to left/right to scroll site page left/right using js or jQuery?
I may be a little late but had the same question before I stumbled over this question.
A little further investigation lead me to think that the best bet to capture trackpad scrolling would be the wheel event.
function doScroll(e) {
// positive deltas are top and left
// down and right are negative
// horizontal offset e.deltaX
// vertical offset e.deltaY
console.log(`x:${e.deltaX} y:${e.deltaY}`);
e.preventDefault(); // disable the actual scrolling
}
window.addEventListener("wheel", doScroll, false);
I have prepared a fiddle that tells you the scroll direction and offset values but prevents the scrolling itself.
The wheel event has a delta property that (at least in Chrome) is sensitive to momentum and gives you the current relative scroll offset rather than the absolute scroll position available in the scroll event.
Usually when you want to take over touch events in script, you add something like this to prevent the usual scroll and zoom:
$("body").bind("touchstart", function(e) {
e.preventDefault();
})
What you need to do is change what can be scrolled. If your page is big enough where left/right scrolling makes sense, the browser will allow it be scrolled that way.
Basically, if you only want them scrolling in a certain direction, only make content in that direction. If necessary, you can achieve this by having a container div of the specific size you want with overflow set to none.