To increment the amount in multiples of 100 with each scroll up or down, we need to ensure that the amount stays within the desired increments. Here’s how you can implement this:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll to Change Amount</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.amount-display {
font-size: 2em;
border: 1px solid #000;
padding: 20px;
}
</style>
</head>
<body>
<div class="amount-display">Amount: <span id="amount">0</span></div>
<script>
let amount = 0;
document.addEventListener('wheel', function(event) {
if (event.deltaY < 0) {
// Scrolling up
amount += 100;
} else if (event.deltaY > 0) {
// Scrolling down
amount = Math.max(0, amount - 100);
}
document.getElementById('amount').textContent = amount;
});
</script>
</body>
</html>
```
### Explanation:
1. **HTML Structure**:
- A `div` element with the class `amount-display` to show the current amount.
- A `span` element with the id `amount` to dynamically update the displayed amount.
2. **CSS**:
- Basic styling to center the content and make the text larger.
3. **JavaScript**:
- Initialize a variable `amount` to keep track of the current amount.
- Add an event listener for the `wheel` event on the `document`.
- Check `event.deltaY` to determine the scroll direction.
- If `deltaY` is less than 0, it means the user scrolled up, so increase `amount` by 100.
- If `deltaY` is greater than 0, it means the user scrolled down, so decrease `amount` by 100, but ensure it doesn't go below 0 using `Math.max(0, amount - 100)`.
- Update the content of the `span` with the new amount.
This code will increase the amount by 100 when you scroll up and decrease it by 100 when you scroll down, ensuring the amount doesn't go below 0.
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me