Issues with triggering onScroll event in Internet Explorer 11

<html>
    <head>
    <style>

div {`border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;`

    }
    </style>
    </head>
    <body>

    <p>Experience the magic of scrollbar within a div.</p>

    <div id="xyz">In my days of youth, my father shared wisdom with me that continues to echo in my thoughts.</div>

    <p>Scrolled <span id="demo">0</span> times.</p>

    <script>
    document.getElementById("xyz").onscroll = myFnction;
    var x = 0;
    function myFnction() {

        document.getElementById("demo").innerHTML = x += 1;
    }
    </script>

    </body>
    </html>

I have also attempted to use the onscroll event within the div tag, but it seems to not be effective. Any suggestions or solutions would be greatly appreciated!

Answer №1

Do you see any errors in this CSS code?

Check out the CSS below:

div {
     border: 2px dashed red;
     width: 250px;
     height: 150px;
     overflow: auto;
  }

http://jsfiddle.net/qwerty123/

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

What is the reasoning behind having additional parameters right next to require('../models/owners.js')?

import('../utils/handlers.js')(database, Sequelize); The structure of using import(..something)(why?) consecutively is a bit confusing to me. Can you explain it further? ...

How can I align those 3 divs in the center of the body?

Can someone help me with centering those 3 divs in the body? I have tried creating 2 versions of the row, one with an extra outer wrap around the column and one without. Unfortunately, since this HTML was created with a page builder (WP visual composer), I ...

Manipulating CSS Class Properties Using JavaScript

In my JavaScript application, there is a functionality that loads a list of items for users to click and view detailed information in a separate div on the page. Users should be able to interact with and make modifications to these individual item overview ...

Updating padding through local storage does not function as intended

I recently added two buttons to my website for adjusting the padding. While they are functional, I find myself manually setting the padding for nav, main, and footer in the CSS. Here is the snippet of the code: main { padding: 20px 25%; } footer { ...

Determine if offcanvas element is visible upon initialization in Bootstrap 5 Offcanvas

I have a search-filter offcanvas div for location and property type on this webpage: On larger screens (desktop), the offcanvas is always visible, but on smaller screens (mobile), it is hidden and can be toggled with a button. This functionality works per ...

Utilize a single JavaScript file to handle various views without encountering errors due to undefined functions

My backend editing requires a single JS file. However, I face the challenge of needing different sets of methods for view A and view B — never both at the same time. To streamline this process, I combined all the jQuery functions for both views into one ...

Retrieving Dropdown Value in Bootstrap 5: How to Obtain the Selected Item's Value from the Dropdown Button

I am having a slight issue with my dropdown button where I am trying to display the selected item as the value of the dropdown button. The Flag Icon and Text should be changing dynamically. I have tried some examples but it seems that it is not working as ...

Issue "Invalid UTF-8" encountered while compiling sass using @import

Here is the structure of my project: project assets scripts styles app.scss bower_components node_modules public css app.css js bower.json gulpfile.js package.json I am using gulp-sass to compile app.scss into ap ...

Tips for updating React context provider state when a button is clicked

WebContext.js import React, { createContext, Component } from 'react'; export const WebContext = createContext(); class WebContextProvider extends Component { state = { inputAmount: 1, }; render() { return <WebC ...

How well are DOM Mutation Observers supported across different web browsers?

I attempted to search for a solution by Googling, but was unsuccessful in finding an answer. Does anyone know if there is a compatibility matrix available for this feature that works across all browsers? In case someone is interested in the answer, here ...

Exploring file serving in Node.js with passport authentications

I am currently utilizing Passport with the Google strategy for authentication. Here is my folder structure: views home.html enter.html (this contains just one Google+ button) app.js routes auth.js (handles Google login) I want the client to be direc ...

Yet another inquiry about the inexplicable failure of my jQuery Ajax in Internet Explorer

Just need to double-check if my test code below is correct. I've done some research and it appears that html syntax errors can cause the jquery ajax to not work in Internet Explorer? There are several includes where this code is located, so could the ...

"Simultaneously creating a Firebase user account and populating the database with user

My goal is to store new user information in my database using their unique user UID when they sign up through Firebase. Currently, my code is functioning properly, however, I am facing an issue where the name (which should be the created user UID) appears ...

Dealing with numerous condition matches in Node.js: Tips and Tricks

Currently, I am developing an API in Express.js where I have to check for certain conditions before sending a response. The issue I'm facing is that if two conditions are met, my code ends up responding twice. Is there a way to prevent the other condi ...

A step-by-step guide on how to refresh a circular loading indicator

I have been researching how to create a circular progress bar using canvas, and I came across this code. After making some modifications to the code snippets that I found online, I encountered an issue - I can't seem to reload the circular path once i ...

Obtain the file path and store it in a variable right after using fs.writefile

Can anyone assist me in obtaining the file path of the created file in the following code snippet? I am passing a barcodeSourceNumber as a parameter and expecting the file path as the return value. pathToFile = generateBarcodeImage('123456789'); ...

Unexpected error: JSON data at line 1 column 1 of the JSON data is incomplete

I've encountered an issue with my script related to a JSON response error. Below is the code snippet in question: $(document).ready(function() { $('#btndouble').click(function(){ var address = $('#btcaddress').val(); ...

What is the best way to retrieve data from the server for individual div elements?

Utilizing Laravel and JQuery to render the HTML is my current approach. <div id="div1">0</div> <div id="div2">0</div> <div id="div3">0</div> Each instance of 0 within the divs needs to be s ...

Javascript - Incorporate a hyperlink into my Flickr Api image query

I am struggling with incorporating a link around the image generated by this request due to my limited API knowledge. Below is the current function responsible for displaying the album images. To see a functional version, please refer to the provided fidd ...

When working with jQuery, I encountered the error message "is not a function" because I mistakenly tried to use a function more than

While working on a pager, I encountered an issue with a function that is initially invoked when the document loads. However, when attempting to use it a second time, an error "is not a function" occurs. I am curious about the reason behind this phenomenon. ...