Experience choppy scrolling in Internet Explorer

Check out my click and drag scrolling Image Viewer here.

While it functions perfectly in Firefox and Chrome, Internet Explorer is giving me some trouble. The movement seems jerky, especially when scrolling diagonally. It's like the scroll is sluggish and each movement is visible separately.

This is how I'm handling the scroll for the DIV (viewPort is a jQuery object).

viewPort[0].scrollTop = newy;
viewPort[0].scrollLeft = newx;

Any suggestions on how to achieve smooth scrolling in IE9 and IE10?

Edit: For reference, I am using IE10 on Windows 7. However, I have witnessed smooth scrolling on IE10 running on Windows 8.

javascripthtmlcssinternet-explorer

Answer №1

When working with mousemove/touchmove, it's a good idea to implement UI changes within a requestAnimationFrame callback. Check out this jsfiddle

While I can't guarantee that this will solve all your issues, it's certainly a step in the right direction.

Another effective solution involves using transforms. By applying position:absolute styles to the image and setting the container to have overflow:hidden and position:relative, you can use translate(Xpx,Ypx) for the image's positioning rather than adjusting the container's scrollLeft/scrollTop.

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

Tips for dynamically changing the number of visible ListItems in React using a single method

I recently stumbled upon the perfect solution at this link using material-ui. The chapter on "Nested list items" caught my attention, as it only has one nested item with a method for expanding more or less. In my sidebar, I have two nested items that both ...

javascriptreactjsmaterial-uiexpand

Verifying the visibility of an element

I am facing a challenge with a list of apps displayed on a non-angular page. The availability of these apps depends on the subscription level purchased by the user. Even if an app has not been purchased, it is still listed but displayed with an overlay (pl ...

javascriptangularjsseleniumselenium-webdriverprotractor

Issues encountered when using PUT requests in a react.js application

I've encountered an issue with a PUT request where, after editing one field and saving, all other values except the edited one become null. It seems to be related to the onChange() function, but I'm not entirely sure. Below is all the relevant co ...

javascriptnode.jsreactjsrestexpress

Provide a random number that is not already listed in the array

I am working on creating a function that accepts an array as input, generates a random number between 1 and 10, keeps generating numbers until it finds one that is not in the array, and then returns that number. For more information and to see the code in ...

javascriptjqueryarrays

I'm curious about something I noticed in an HTML example within the text content section of elements. Can you help clarify this for me?

I recently came across a repository that was part of a bootcamp curriculum for learning full stack development. In one of the lessons on jQuery, students were tasked with building a calculator. However, I noticed some strange variables in the HTML where te ...

javascripthtmljquerycss

Creating a straightforward CSS design that stretches to fit the entire viewport dimension

I am attempting to create a simplistic layout using HTML/CSS, as depicted in the wireframe below: /------------------------------------------\ | | | header div | | ...

htmlcssxhtml

Issue encountered while attempting to log out a user using Keycloak in a React JS application

I'm currently working on implementing authentication for a React JS app using Keycloak. To manage the global states, specifically keycloackValue and authenticated in KeycloackContext, I have opted to use React Context. Specific Cases: Upon initial r ...

javascriptreactjsreact-hookskeycloakreact-context

Exploring the application of javascript method within a Vue template

Currently, I am attempting to extract a numeric value from the end of a URL. However, I am encountering an error in doing so. It has been a while since I last worked with Vue, but I know that we can use methods/functions to achieve the desired outcome. Cou ...

javascriptvue.js

Ensure that the flex item spans the entire width of the page

I'm struggling to make my audio-player resize properly to fit the full width of my page. I can't seem to figure out what I'm missing or doing wrong... (Current Look) I'm attempting to utilize HTML custom controls to design my JSON Aud ...

javascriptcssjsonflexbox

Tips for displaying Vue Components on an HTML5 canvas surface

How can I incorporate an htmlcanvas as the webpage background and overlay Vuejs components on top of it? I know the answer must exist, but I'm not sure where to start looking. ...

javascripthtmlvue.jshtml5-canvaspaperjs

Trouble with formatting credit card numbers in Vue.js

My payment gateway component includes a feature where selecting credit card triggers the _formatCreditCard method to format the credit card number like this: 4444 2442 4342 3434 This is the function in question: _formatCreditCard: function() { var n ...

javascriptjqueryvue.jsvuejs2

Utilize the :not() and :hover selectors in Less when styling with CSS

Some of my elements have a specific class called .option, while others also have an additional class named .selected. I want to add some style definition for the :hover state on the .option elements, but only for those without the .selected class. I' ...

cssless

Obtain the user's email using nodemailer

I created a contact form using Nodemailer that I am having trouble with. Take a look at the code below: let mailOptions = { from: '<<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3636360e363636602d2123">[emai ...

javascriptjquerynodemailer

The functionality of socketio can only be activated within a function by utilizing the window.alert

I encountered a strange issue while working on my web development project using Flask and vanilla JavaScript. I'm attempting to create a basic chat feature with socketio. Strangely, the functionality only seems to work when I include a window.alert in ...

javascriptpythonflasksocket.io

Modify a section of an HTML text's formatting

function changeEveryCharColor(id) { var part; var whole = ""; var cool1 = document.getElementById(id).innerHTML; console.log(cool1); for(var i = 0; i < cool1.length; i++) { color1 = getRandomInt(255); ...

javascripthtmlcss

Tips for aligning 2 columns perfectly in a 3 column layout

I am facing an issue with a grid section where the grid-template-column is set for 3 columns, but sometimes the content loaded dynamically only fills 2 columns. I am attempting to center the columns when there are only 2. Despite going through the grid CS ...

cssgridmultiple-columns

Comparison of getComputedStyle() and cssText functionality between Internet Explorer and Firefox

Take a look at this example to see the issue in action. I'm attempting to access the cssText property of a <div> using window.getComputedStyle(element) (which provides a CSSStyleDeclaration object). While this works smoothly in Chrome, it' ...

javascriptcssinternet-explorer

Looking for help understanding a basic piece of code

$('#ID').on('click', function() { if(!CommonUtil.compareDateById('startDt','endDt',false, false, true)) { return false; } var cnt = 0; if(!CommonUtil.isNullOrEmptyById('startD ...

javascriptjquery

Can solid grid lines be shown using CSS instead of the default dashed grid lines?

Is there a method to achieve consistent and solid grid lines in C3 using CSS without specifying exact line values? For instance, consider C3's basic Grid Line example: var chart = c3.generate({ data: { columns: [ ['sampl ...

cssgraphc3.jsgridlines

Step-by-step guide for implementing LoadGo animation with HTML

I'm in the process of loading my logo on my website's homepage. I found a LoadGo animation that I want to use, which can be downloaded Here Currently, the logo is set to load when a button is clicked. However, I would like it to load automatical ...

jqueryhtmlcss