"Learn a handy trick for toggling between upper and lower cases

Is there a way to switch case by scrolling? I want it so that when I scroll up, the cases change in one direction, and when I scroll down, the cases change in the other direction. I hope that makes sense.

I have figured out how to achieve this using hotkeys, but now I am looking for a solution that involves scrolling (without clicking on the scroll).

    document.addEventListener('keydown', function (e) {
        if (ws) {
            switch (e.keyCode) {
                // T
                case 84:
                    if (player.items[ITEM_TYPE.WINDMAIL]) ws.send("42[\"5\"," + player.items[ITEM_TYPE.WINDMAIL].id + ",null]");
                    break;

                // G
                case 71:
                    e.stopPropagation();
                    if (player.items[ITEM_TYPE.SPIKES]) ws.send("42[\"5\"," + player.items[ITEM_TYPE.SPIKES].id + ",null]");
                    break;

                // Z
                case 90:
                    e.stopPropagation();
                    if (player.items[ITEM_TYPE.EXTRAS]) ws.send("42[\"5\"," + player.items[ITEM_TYPE.TURRET].id + ",null]");
                    break;

                // F
                case 70:
                    e.stopPropagation();
                    if (player.items[ITEM_TYPE.PITTRAP]) ws.send("42[\"5\"," + player.items[ITEM_TYPE.PITTRAP].id + ",null]");
                    break;

            }
        }
    }, true);

The above code works well with hotkeys, but my goal is to achieve the same functionality using scrolling instead. Can anyone provide assistance?

javascriptjqueryhtmlcss

Answer №1

If you want to monitor scroll events, you can use the addEventListener method. More information on this can be found here: https://developer.mozilla.org/en-US/docs/Web/Events/scroll

For instance:

window.addEventListener('scroll', function(e) {
  // take action
});

You can also listen for scroll events within a smaller box in your user interface:

document.querySelector('.my-scrollable-box').addEventListener('scroll', function(e) {
  // take action
});

Once you have set that up, you can track the previous scroll position to determine if the user scrolled up or down:

var last_known_scroll_position = 0;
window.addEventListener('scroll', function(e) {
  if (window.scrollY > last_known_scroll_position) {
    // user scrolled down
  } else {
    // user scrolled up
  }
  last_known_scroll_position = window.scrollY;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble accessing JSON file again: "Encountered unexpected end of input error"

I have set up a cron-based scheduler to periodically retrieve JSON data from an external API every 2 minutes. The process involves writing the data to a file, reading it, cleaning it, and then storing it in a MongoDB collection. Everything works smoothly o ...

javascriptjsonnode.jsmongodb

What is the best way to apply style only to the input attribute with the name that we know?

Is it possible to style the label in front of a text field using only the name attribute of the text field? I am currently using the dform plugin which converts json to form. I want to add styling specifically to the text field named "timeout". Here is th ...

javascriptjquerycss

VueJS does not update values instantly as they change

I have implemented a JS class with the following code: class Field { public Value = null; public Items = []; public UniqueKey = null; public getItems() { let items = [...this.Items]; items = items.filter((item) => { ...

javascriptvue.js

Using jQuery to retrieve information from another webpage and populate form fields with the data

Looking for assistance on retrieving values from test2.php and populating form fields on test1.php. Any guidance is appreciated. test 2 page $empidx="Design-1012-1000"; $countries = mysqli_query($con,"select country from countries"); $query = mysqli_quer ...

phpjquerymysqljsonget

Adjusting the display property using the CSS plus symbol operator

I am currently in the process of designing a dropdown menu using CSS. The focus is on utilizing the following code snippet: #submenu_div { display: none; } #li_id:hover + #submenu_div { display: block; } UPDATE: Here is the corrected HTML structure ...

htmlcss

Problem with uploading a zip file in Angular 2

Whenever I attempt to upload a zip file, unfortunately it fails to upload on the server and instead gives me an error message. Here is the code snippet: const event = this.fileEvent; console.log('FileEvent --> ', event); const fileList: FileL ...

htmlangulartypescript

Update component state based on input value

Trying to update the state of an input within a component and utilize it in app.js. How can this be achieved using props? Attempted onChangeText={(tips) => this.setState({comment})} but only receiving undefined results.. const Comments = (props) => ...

javascriptreactjsreact-native

The :after pseudo-element in action with multi-line text

Can the styling of the :after pseudo-element be applied to every line of multi-line text? Here is the code I am currently using: .container { width: 50px; } .text { position: relative; } .text:after { content: ''; position: ...

htmlcsslayoutpseudo-element

The image we downloaded seems to indicate that our system does not support this particular file format

I have a static HTML file that is hosted on Netlify. Here is the URL: After successfully downloading the images, when I try to open them I receive an error message stating "it appears that we don't support this file format". I am unsure why this is ...

javascriptfile-handlingimagedownload

What is the easiest method to preserve a specific dd option when submitting a form?

My webform has validation functions for each field, and if there are any validation failures when the form is submitted, the user is returned to the form with previous values in the input fields and error messages displayed. This functionality is working c ...

phpjqueryajax

Order of Loading Custom JavaScript in Django Admin

Utilizing jquery to enhance certain functionalities of fields within the django admin, you can include your code like this: class SomeAdmin(admin.ModelAdmin): class Media: js = ( "/static/js/lib/jquery-1.3.2.min.js", ...

jquerydjangodjango-admin

Create a virtual camera in Three.js that produces an optically-inverted (mirror-image) result

In my Three.js project, I have a scene with various objects and text that are viewed through a single camera named camera_A. The output of this camera goes to a viewport_A on one part of my webpage. Now, I want to add a second camera (camera_B) that will ...

javascriptthree.js

Unable to open Node.js Interactive Window in Visual Studio Enterprise 2017

Having some trouble with NodeJS development in Visual Studio 2017 Enterprise. Whenever I attempt to open the NodeJS Interactive Window, an error message pops up like this: https://i.sstatic.net/c02jJ.png Tried uninstalling and reinstalling Node.js tools ...

javascriptnode.jsvisual-studio-2017

Chosen link fails to update color

I've successfully implemented a navigation bar that changes the content in the body when each link is selected. Utilizing AJAX for dynamic content changing, I can change the color of menu items on hover but am facing issues with changing the color upo ...

htmlcss

Is Chrome capable of caching every single web page visited?

I am tasked with presenting an RPA script that clears cache. My idea is to create a web page as a demonstration. I want to cache this web page so that any changes I make in the HTML will not immediately show up. When I run the script, it should clear the ...

javascriptpythonhtmlgoogle-chromebrowser-cache

I am puzzled as to why it is searching for an ID rather than a view

Currently, I am attempting to navigate to a specific route that includes a form, but for some unknown reason, it is searching for an id. Allow me to provide you with my routes, views, and the encountered error. //celebrities routes const express = requir ...

javascriptnode.jsexpressrouteshandlebars.js

Issue with the positioning of the SimpleModal jQuery plugin

I am facing a similar issue as discussed in this thread: Question about SimpleModal jQuery plugin -- possible to re-center after initial open? Despite attempting the suggested solution, I have not been successful. Upon opening the modal on my page which i ...

jquerysimplemodal

Combining two JSON objects within the server environment

Managing a large list of local variables in an inherited express application can be tricky. Passing around 30 unchanging variables to res.render for every page is not ideal, especially when changes need to be made in multiple locations. To address this is ...

javascriptjson

Is it necessary for me to consistently run the cmd in order to view sass changes?

Discovering the wonders of Sass has been truly amazing, but I find myself looking for a more efficient way to streamline my coding process. Opening cmd prompt, changing directories, and running sass --watch sass.scss:style.css every time I restart my compu ...

csssass

Issue with parsing dates while importing external JSON data into Highcharts Line Graph

Seeking help to create a highstock chart that will display the remote JSON data below as a line graph. I only need a simple rendering of the data, but please note that the date in the dataset includes hourly values. poolprice container: panelone [{"dat ...

javascriptjsonhighcharts