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

The true meaning of CSS3 transition is often misconstr

I'm trying to create a simple linear transition effect, but for some reason it's not working. Any suggestions on what might be causing the issue? HTML <div class="button-modern" style="background-color:#e73032"> <span style="color: ...

jquerycsscss-transitions

Initiating a YouTube video with a click on its thumbnail image - a jQuery tutorial

I am currently working on code that successfully displays YouTube videos. However, I would like the video to start playing when the cover image is clicked. How can I achieve this functionality? Thank you for your help! <div id="video" style="display: ...

javascriptjquery

Using object in TypeScript to reduce arrays

Is there a way to set the return value for my reducer in TypeScript? I am looking to achieve: Instead of using 'any', what should I assign as the type for acc? How can I define my return type so that the output will be {temp: 60, temp: 60}? retu ...

javascripttypescript

What is the best way to retrieve the value of a textbox in AngularJS?

Trying my hand at creating a basic web page using angular. I've got 2 textboxes and 2 buttons - one to set a predefined value in a textbox, and the other to add some text. Here's the code snippet: <!DOCTYPE html> <html lang="en" ng-app ...

javascriptjqueryhtmlangularjs

How to create a heading within a Bootstrap list item?

Attempting to replicate this layout using Bootstrap 3 This is my current progress <ul class="list-group"> <li class="list-group-item> Cras justo odio </li> <li class="list-group-item> Dapibus ac facilisis in </l ...

csstwitter-bootstrap

Attempting to utilize a Python web scraping tool to extract content from a webpage that undergoes regular text updates

I must admit that I am a complete beginner who is feeling lost and unsure of what to do. My goal is to extract 4 pairs of numbers from a webpage using a web scraper. These numbers change when modified on a different page, but I'm unable to pull the d ...

javascriptpythonhtmlcss

Unresolved issue with AngularJS radio button binding

As a beginner in using Angular.js, I encountered an issue with data binding when dealing with radio buttons. The HTML code in question is: <label class="options_box" ng-repeat="item in item_config_list.item_config"> <input type="radio" name ...

javascriptjqueryhtmlangularjs

Harness the power of a NUXT component on a different website

Currently, I have a fully functional NUXT application that consists of numerous pages and components operating in `universal` mode. My challenge now is to render one of these components on a separate static HTML website. Exporting a component from a stand ...

javascripthtmlvue.jsvue-componentnuxt.js

Leveraging IntersectionObserver to identify the video in view on the screen

Our Objective I aim to implement a swipe functionality for videos where the URL changes dynamically based on the ID of the currently displayed video. Challenges Faced Although I managed to achieve this with code, there is an issue where the screen flashe ...

javascriptreactjstypescriptintersection-observer

Exploring the internet with Internet Explorer is like navigating a jungle of if statements

I am facing an issue with my code that works well in Chrome, but encounters errors in IE. The if condition functions correctly in Chrome, however, in IE it seems like the first condition always gets executed despite the value of resData. Upon analysis thro ...

javascriptjqueryajaxinternet-explorergoogle-chrome

Assign a unique value to every line in a JSON string within the Vue.js hierarchy of components

I created a Vue component that initializes an empty list and an object like this: data: function(){ return { list: [], newThing: { body: '', }, }; }, The list is then populated with JSON data fetched ...

javascriptarraysjsonobjectvue.js

What triggers the invocation of the onerror handler in XMLHttpRequest?

I am facing a bit of confusion when trying to understand the functionality of XMLHttpRequest's handlers. After reading the specification regarding the onerror handler, it mentions: error [Dispatched ... ] When the request has failed. load [Dispa ...

javascriptajaxxmlhttprequest

Executing program through Socket.io alert

My NodeJS server sends notifications to clients when certain actions are performed, such as deleting a row from a grid. Socket.io broadcasts this information to all connected clients. In the example of deleting a row, one approach could be adding an `acti ...

javascriptnode.jsangularjssocket.ioeval

Tips for Removing Copyright on Charts

Check this out : https://jsfiddle.net/oscar11/4qdan7k7/5/ Is there a way to eliminate the phrase JS chart by amCharts? ...

javascriptjquerycharts

What is the best way to convert a query into Sequelize?

select reservation_datetime from LectureReservation Inner Join Lecture On LectureReservation.lecture_id = Lecture.id Where Lecture.mentor_id = 1 This is my initial query and now I am attempting to convert it into a sequelize format like: if (req.params ...

javascriptmysqlnode.jssequelize.js

Adjust the height of an element when an animation is initiated (Angular)

Check out the transition I've set up to smoothly slide between my views: https://plnkr.co/edit/yhhdYuAl9Kpcqw5tDx55?p=preview To ensure that both 'panels' slide together, I need to position the view absolutely. However, this causes the view ...

javascriptangularjsangularjs-directive

Is there a simpler method for making multiple posts using an AJAX JS loop?

My form is quite extensive and uses AJAX to save. The JavaScript functions are stored in an external file and structured like this: function milestone09() { $.post('./post.3.AIGs2GRA.php?data=' + (secData), $('#milestone09').serialize( ...

javascriptjqueryajax

The option value in mat-autocomplete is not displaying correctly on IOS devices

When I click on the first option in the dropdown menu, it does not display the selected option in the field. However, when I select the second option, then the value of the first option appears, and when I choose the third option, the value of the second o ...

javascriptangulartypescriptangular-materialangular8

Is the use of the auto image attribute height/width impacting rendering performance?

Currently, I am facing an issue with setting the height and width attributes for an image as I do not have access to its dimensions from the server. One solution I am considering is setting both the width and height values to auto. For example: img { ...

htmlcssimage

Submit simple text via XMLHttpRequest to an Express server

I am currently facing an issue with making a post XMLHttpRequest to my Express server. Despite attempting to send a string, it seems that I am missing something crucial in my implementation. Client: const sendMessage = () => { const message = "This ...

javascriptexpressxmlhttprequest