We Keep Coding

React native web scrollView horizontal scroll with mouse

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.

Scroll bar goes automatically to the top when mouse cursor moves out of the scroll bar line

I am trying to create a Leaflet menu based on the properties of the Layer Control code of Leaflet.
This menu becomes automatically scrollable if it is greater than the space left between the top of menu and the bottom of the map.
Javascript:
var acceptableHeight = this._map._size.y - (this._container.offsetTop + 60);
if (this._form.clientHeight > acceptableHeight) {
this._form.style.height = acceptableHeight + 'px';
L.DomUtil.addClass(this._form, 'menu-scrollbar');
}
else {
L.DomUtil.removeClass(this._form, 'menu-scrollbar');
}
CSS:
.menu-scrollbar {
overflow-y: auto;
padding-right: 10px;
}
The scroll bar is perfectly created depending on the size of the form, but it always moves to the top when the mouse cursor goes out of the scrolling bar zone (that is the line which the bar follows). Something also strange is that the bar stays on the same place only if the mouse is quickly changing its cursor type (such as when located on an HTML input zone).
An image can be better than a long explanation:
screenshot of the menu.
I've been looking around similar problems with the scrolling bar:
"Why the vertical scroll bar moves automatically?"
"Scroll bar goes up"
But the answers are not exactly related to the same issue, and I would like to use pure JavaScript rather than mix it with jQuery. One of the feasible solution could be to get the scroll bar position (how to get it) and set it manually (how to do it).
But I am sure that this problem comes from something else tht i don't get.
Can someone help me with this ?
Fiddle example: http://jsfiddle.net/LnzN2/1121/
Thank you in advance.

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.

How do I set scroll top of a web page

I am facing a problem with set scroll bar top position. Actually what I need is; I am using a JQuery Keyboard plugin where for all the elements I need to display the virtual keyboard at the center bottom of the page and its done.
But the problem I am having is when I have a input field near to the bottom of the page where that page does not display the scroll bar (It means there is no need of overflow because all the elements I have is visible in my page). Since I am displaying the virtual keyboard at the bottom of the page and when the focused element also is at the bottom of the page I need to initiate the scroll bar and page should go up by scroll down automatically so active input field element is visible to me.
I tried to set the scroll bar by using this
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where _scroll_top is my current scroll top position, _el_top is focused elements top position, _el_height is my focused elements height and _keyboard_top is the top position of the keyboard.
Now the problem is when I have a more height page (It means scroll bar size is small i.e. scroll bar size may be around 60% of the screen.Height) scrollTop is correctly working and I can see the active input element even though keyboard is visible. But when I have small height of a page (Example: scroll bar size is around 90% or it may be same size of screen.Height) scrollTop is is not working correctly so the active input element is not visible and it is behind to virtual keyboard.
How can I set the scroll top correctly so I will be able to see the active input element then at the bottom of that element I can see virtual keyboard.
Please see the attached image. That is where actually active input element should be displayed.
First Image is Before Enable the keyboard: Just see the element's position, sroll top
Second Image is After Enable the keyboard: Just see the element's position, sroll top
This is what I need when my scroll bar size is big (Around 90% of the screen.Height)
Thanks in advance.
P.S: I am extremely sorry if I confuse by the way I expressed my question.

use jQuery('html,body').scrollTop('other things here');

Thanks for the responses.
I have found the solution for my question.
At the bottom of the page I have created a dummy div element.
<div id="scroll_dummy"></div>
Initially this div will be having zero height. I applied the height of the keyboard to this div. As a result your page size will be increased so it can easily move the scroll top. At the time of close again revert back this style.
Then at the place of I am applying scrollTop I have done this.
$("#scroll_dummy").css("height", _keyboard_height);
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where
_scroll_top : scroll top position
_el_top : active element top position
_el_height : active element height
_keyboard_top : keyboard element top position
_keyboard_height : keyboard element height position
Done with this... :)

How to calculate if mouse pointer at bottom page using Prototype?

I want to create auto-hide menu, just the same thing like http://www.ringvemedia.com/shanghai-photos but the problem is that I also have content that is scrolling down so if I calculate pointerY it will return mouse absolute position so it could be 1000...999999 depends on how many content you have to scroll down, that why I cant use something like "if (pointerY+50) >= document.viewport.getDimensions().height then $("somethind").show();". What I want is to somehow calculate that mouse right now is on bottom of the screen (+- 50px) (not the content).
I think I have confused even myself :) hope someone will understand what I wrote.

I think you have to use document.viewport.getScrollOffsets() and then substract the pointerY with the scroll offset to get the position in the viewport.