React native web scrollView horizontal scroll with mouse - javascript

Using react-native-web, I have a scrollView with content much wider than the screen. Using 'horizontal' I can scroll along the x-Axis as expected, however only with the touchpad of my laptop. Mouse wheel scrolling doesn't do anything since the wheel apparenlt only scrolls vertically and not horizontally.
I have been looking for a while but cannot find any way to do horizontal scrolling with the mouse wheel.
Any help with this would be greatly appriciated!

By default, the user needs to hold Shift + Scrolling Mouse Wheel to scroll horizontally.
Edit: This issue can be solved via jQuery but requires you to hide the vertical bar with CSS "overflow-y: hidden". You will need to download jQuery.js and jQuery-mousewhee.min.js and include them in your html.
After you download the files, include the scripts below in your code.
<script scr="jquery-3.6.0.min.js"></script>
<script scr="jquery-mousewhee.min.js"></script>
Then include in your body's CSS (or any div that you want to scroll horizontally)
overflow-y: hidden;
Finally, add in the custom script
<script>
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 30);
e.preventDefault();
});
});
</script>
Done.
Note: You will need to mess around with the code if you want to include the vertical bar back.

Related

Simulate mouse scroll using only Javascript

Just to provide context: I want to simulate mouse scroll on Google photos (photos.google.com).
The page contains scroll bar only for a portion of the page (the top "Search" section does not have a scroll bar).
The following does not work (but it works fine for scrolling on say Facebook, or SO):
window.scrollTo(0, 10000000)
Any clues on how I can simulate mouse scroll ?
If you aren't scrolling the whole window then window.scrollTo is not what you want. You can scroll a section of DOM that has a style of overflow: scroll with something like:
var scrollBox = document.getElementById('sectionId');
scrollBox.scrollTop = 100; // num pixels from element top you want to scroll down
Which is the same as:
$('#sectionId').scrollTop(100);
You might want to consider a library like https://github.com/kswedberg/jquery-smooth-scroll which scrolls the screen in an ease-in ease-out fashion, which is easier for users to follow.

Jquery-ui draggable glitch?

Hi I am trying to make a scroll bar (I'm still far from done, link here: http://jsfiddle.net/xD2Hy/24/ ), thing is that when I scroll (using the scroll bar) to the bottom, THEN and I resize the window to make it SMALLER, the scrollbar drowns under the window. To fix this, i tried adding a jquery offset to the scroll bar move it up when i resize. NOW when i scroll to bottom, then i resize, the scroll bar dissapears completely! I really dont know what to do, im still learning javascript, please help. Here's a the offset jquery of the code, check the link of the jsfiddle for the whole thing:
$('#scrollBar').offset({top:100});
It seems you're setting offset to 100px from document's top border. You need to set offset based on scrollbar's parent container offset and height, and scrollbar container's height. Try this instead:
var scrollContainer = $('#cow'),
scrollBar = $('#scrollBar');
scrollBar.offset({ top: scrollContainer.offset().top + scrollContainer.height() - scrollBar.height() });
Updated fiddle.

Is there a js function that scrolls a site left right up and down?

I was wondering if anyone knows if there was a javascript or something that scrolls a site left right up and down on a click.
For example I want to create a site with multiple divs. Look at photo below.
I want each div to fit to screen and div 1 being the main div, the starting point. Say that I had a link in the menu for biography and the content for biography was in div 4 and someone click biography, I want the site to move down to div 3 and then right to div 4 and the same thing goes for div 4 and all the divs. When someone clicks a link in the divs I want the site to scroll in a direction I specify, is this possible.
Left Right Up Down
The jquery animate function is the right way.
Here you can find a simple and clear tutorial on how to use it: http://gazpo.com/2012/03/horizontal-content-scroll/
The tutorial is for horizontal scroll only, but you can easily extend to scroll your page in both directions (vertical and horizontal at the same time).
Yes, they are:
.scrollLeft()
.scrollRight()
With jQuery, you can animate the body's scrollTop value to scroll up and down:
$("html,body").animate({
scrollTop: $("#bio").offset().top
}, 1000);
The above code will scroll to the element with the id of #bio.
In terms of scrolling sideways, I supposed you could use a little trick. Set the body's overflow-x to hidden to hide anything that overflows to the right of the browser viewport. Then you can adjust the margin-left of body to "scroll" to the right or left. But, of course, this removes the ability for users to scroll through all of your divs.
$("body").animate({
marginLeft: "-100%"
}, 1000);
you can use jquery animate function ,it will give you more control
$('#div').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
read more from -
http://api.jquery.com/animate/

div container following scroll of screen

I'd like to set up a "backward-compatible" scrolling sidebar on one of my pages.
I have a page containing information about a species of fish which can be extraordinarily long and images to accompany it.
The images are in the right-hand pane at the moment and I'd like them to follow the user as they scroll to the bottom of the page.
I've used the following code with some success:
jQuery().ready(function($) {
var $scrollingDiv = $("#sidebar");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});
But it jumps too far when scrolling down.
(original position)
(scrolled a single mousewheel click)
When you start scrolling down the page, the sidebar appears around half-way down and as such you can only see two of the images.
Once a user scrolls past X point (say 400px), I would like the sidebar to start moving with the page. However, it also needs to go back to its original position when the user reaches the top of the page once more.
Is there a fix that can be applied to this code, or a better way of approaching this?
---------------------------------------------------------------------------------
EDIT: position:fixed Problem
When I try to apply position:fixed as per Josh and David's suggestions (either bit of JS code), this happens:
Here is Firebug's read-out of the CSS styles attached to this element:
You can use a plugin for this, but it’s such a simple task that you might as well do it on your own.
Consider this simple markup:
<div id="content">Content</div>
<div id="sidebar"><div>Sidebar</div></div>
And this would be all the javascript you need:
var el = $('#sidebar'),
pos = el.position().top;
$(window).scroll(function() {
el.toggleClass('fixed', $(this).scrollTop() >= pos);
});
Now, it will add a class to the #sidebar div as soon as the user scroll further than the sidebar is positioned, so all you need now is som CSS. I’m applying the fixed positioning to a child element to avoid layout problems:
#sidebar.fixed > div{position:fixed;}
I put up a really simple demo here: http://jsfiddle.net/QZyH3/
You should try the jQuery code found in this tutorial, which replicates Apple's shopping cart sidebar. It has a working demo and a very small code footprint.
why not use css position: fixed; property? of course if you don't mind the div being not smooth but straightly following your scrollTop. I've found it not working only in IE6-- by today, so using fixed position is a good solution I think, otherwise you just get with window.scrollTop of DOM and assign it to your element's absolute position top

Overriding scroll function within only one element

I'm using jquery to provide clickable overlays, I'd like to replace the default Scroll up/down methods with left/right (So when you scroll the page it moves horizontally not vertically. I'm worried about the scroll function still working as intended within the overlays.
Update: If it's not possible to scroll the browser what about a div that has a horizontal scroll bar that on scroll up/down moves left to right (as well as anchors)
My JavaScript experience is somewhat limited, any guidance with this matter would be greatly appreciated
Thanks!
Found an appropriate solution with:
http://plugins.jquery.com/project/ScrollTo
my code:
function shiftScroll(offset) {
console.log('current:' + window.pageXOffset);
console.log('currentY:' + window.pageYOffset);
$(window).scrollTo(window.pageXOffset + offset, window.pageYOffset, {axis:'x'});
}
I still need to disable the vertical scroll bars in the body, while not disabling the vertical scroll bars in elements within the page.

Categories