How to retrieve the scrolling distance in Internet Explorer using JavaScript

I am working with a scrollable div and I need to find a way to conditionally stop it from scrolling.

Here is an example of the code:

if(theDiv.scrollTop + theDiv.clientHeight + thisScrollAmount > theDiv.scrollHeight)
    StopScrolling();

How can I determine the actual amount the scroll has scrolled? (I am aware that event.wheelDelta is usually +-120, but the real amount scrolled may differ.)

EDIT I apologize for any confusion. It seems like my question was not clear enough. I wanted to know how much the div WOULD scroll if the event was not canceled by its handler. I thought it might have different values, but it turns out it consistently takes on values of +- 120.

Maybe this question should be removed.

javascriptinternet-explorerscroll

Answer №1

    //This solution is quite effective

<style type="text/css">
  #divTest{width:150px;height:200px;overflow:auto}
</style>

<script>
  var  maxScrollAmount = 400
  function setMaxScroll( ){
    if( document.getElementById('divTest').scrollTop > maxScrollAmount){
      document.getElementById('divTest').scrollTop = maxScrollAmount;
    }
  }
</script>


<body><div id="divTest" onscroll="setMaxScroll()" >
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
      1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>
    </div>
</body>

Answer №2

Monitor the onscroll event and compare the scrollTop property of the specified div with a predetermined maximum scroll value. If the scrollTop exceeds this limit, adjust it back to the maximum threshold.

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

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...

javascripthtmlcssangularjs

Troubleshooting a JQuery GET request failure

I'm attempting to send a GET request once the user inputs a value and use that input as a parameter, but nothing seems to be happening. The alert outside the get function is working fine. Here's my code: $(document).ready(function(){ $( "input[ ...

javascriptjqueryajaxhtml

Expanding the size of the number input in Twitter Bootstrap to accommodate changing content dimensions

I have a numeric input field that I want to customize in terms of width. I need the field to start with a minimum width so that -1, the default value, fits nicely inside. As the value changes, whether decreasing to -100 or increasing to -1,000 and beyond ...

javascriptjquerytwitter-bootstrap

What is the best way to display a popup using slimbox when the page loads, but only for the initial visit?

I have been exploring the idea of creating a function called popup("url") that checks for an existing cookie when the page body loads (onLoad - not ideal, I know). To implement this functionality, I used the code from this source and included it in my appl ...

javascriptjquerycookiesslimbox

Using localStorage in Next.js, Redux, and TypeScript may lead to errors as it is not defined

Currently, I am encountering an issue in my project where I am receiving a ReferenceError: localStorage is not defined. The technologies I am using for this project are Nextjs, Redux, and Typescript. https://i.stack.imgur.com/6l3vs.png I have declared ...

javascriptreactjsreact-reduxnext.jsreact-typescript

Filter the array and determine the number of elements in the filtered array

I am looking to filter the contents of two arrays and then count the elements where "isimplemented: 'Yes'" is true: const array1 = [{ProjectName: "IT", Department: "Software"}] const array2 = [{Name: "IT", isimplemented: "Yes"}] The method I at ...

javascript

Determine in JavaScript whether an array includes a function in its elements

Currently, I am adding anonymous functions to an array in the following manner: myArray.push(function(){ /* some unique code here */}); myArray.push(function(){ /* even more unique code here */}); Afterwards, I execute all the functions by doing while ( ...

javascriptarraysfunction

Having trouble accessing an element after parsing JSON using jQuery, ending up with an "

Here is a snippet of code with a text and a button: <div id="divtest"> <h1> Bla </h1> </div> <button id="dugme1"> dugme </button> When the user clicks the button, the following script will be executed: $("#dugme1").cl ...

javascriptjqueryarraysjson

Unlock the power of Angular JS to display dynamic content effortlessly

My experience with AngularJs is very limited. In one of my projects, I need to display dynamic content on a page that changes based on the database values retrieved via an HTTP GET request. Before implementing the entire functionality, I decided to test i ...

javascriptangularjs

Using AngularJS to prefill a HTML5 date input field with a default value

Is there a way to bind the default value generated in moment to both the date and time input fields? I have tried using ng-model and directly binding it to the value attributes, but without success. Any suggestions on how to make this work? Edit: Addition ...

javascriptangularjsmomentjs

Using Heroku to deploy NodeJS applications

I am facing an issue while trying to deploy my NodeJS project on Heroku. The project is a multiplayer game where, locally, both players enter the same map successfully. However, on Heroku, I am unable to get both players on the same map. Below is a snippe ...

javascriptnode.jsexpressheroku

Encountering the error message "Error: Unable to process rejection (TypeError): that.setState function is not defined" while using ReactJS

I've been working on a dynamic chart that changes based on the Slider value. I did some research and everyone suggests that I need to bind it to resolve this error. However, no matter how many times I try to bind the function in different ways, I keep ...

javascriptreactjssliderdynamic-chart-series

Mastering the art of correctly utilizing splice and slice

I'm having trouble identifying the issue in my code. Despite reading numerous articles on slice and splice, I am unable to achieve the desired outcome in my Angular project (not using both methods simultaneously). The results are not as expected. Belo ...

javascripttypescript

Steps to combine multiple arrays into a unified array:1. Begin by allocating a

To form a league table, I have multiple individual arrays filled with data. In order to sort them by points, I want to merge these arrays into a single array called "teams". However, I am unsure if there is a function available to achieve this specific f ...

javascript

In the world of three js, objects vanish from view as the camera shifts

I am attempting to display a d3 force graph in three.js using standard Line and BoxGeometry with a photo texture applied. When the force graph is updated, I call the draw function which is triggered by: controls.addEventListener('change', () =&g ...

javascripttypescriptgraph3dthree.js

Combine two objects and discard any duplicate keys

I have two objects named original and custom. My goal is to merge the content from custom into original, but only update the keys in original that are also present in the custom object. Here is an example scenario: var original = { coupon: { ...

javascriptnode.js

What is the appropriate overload to be selected when utilizing a ref in the method call?

Encountering an unfamiliar TS error while working with the code snippet below: <script lang="ts"> import {defineComponent, computed, toRef} from 'vue' import _ from 'lodash' import {DateTime} from 'luxon' int ...

javascripttypescriptvue.jsoverloadingvuejs3

Copying a Pinia state Array without referencing it is not possible

My goal is to duplicate an array within a Pinia store so that I can use it to create a reactive object in various components for input modeling. The intention is to only update the original array if the user decides to save any changes made using the copy ...

javascriptarraysvue.jspinia

Populating dropdown menu with data from redux state upon component mounting

I am new to working with react-redux and have successfully implemented dependent dropdown functionality in a react component (Country => State => City). My goal now is to dynamically update the dropdown values based on data received from the redux s ...

javascriptreactjsreduxreact-redux

Using AJAX for fetching and saving an object into a variable

I am dealing with two specific files in my project. The first one is called index.php, where the user initiates an AJAX request. The second one is called process.php, which is responsible for sending data back to the index.php file. function AjaxResponse( ...

javascriptphpjqueryajax