The feature "scrollTo" in mcustomscrollbar is not functional in Chrome, however, it functions properly in FireFox

It seems that there is an issue with the mcustomscrollbar "scrollTo" function not working in Chrome, although it works fine in FireFox. No errors are showing up in the console, so it appears to be a browser-specific problem. I even tested the functionality on this page and encountered the same issue with vertical scrolling only in Chrome.

$('body.Office .use-custom-scrollbar').useCustomScrollbar();
                var scrollToElement = $('.day.today').length ? $('.day.today') : $('.day.future:first');
                scrollToElement = scrollToElement.length ? scrollToElement.closest(".one-day-container") : $(".one-day-container:last");
                setTimeout(function () {
                    $('body.Office .use-custom-scrollbar').mCustomScrollbar("scrollTo", scrollToElement);
                }, 0);
javascripthtmljquerycss

Answer №1

After spending the entire day searching for a solution, I finally found an answer that worked:

  • - I simply removed the overflow: hidden property for the .mCSB_container selector on this site:
.mCSB_container {
 overflow: unset !important;
}
  • Unfortunately, the initial solution did not resolve the issue with my code. To work around it, I disabled the scrollInertia property for mCustomScrollbar. Here is how the code looks now:
$('body.Office .use-custom-scrollbar').useCustomScrollbar();

var scrollToElement = $('.day.today').length ? $('.day.today') : $('.day.future:first');
scrollToElement = scrollToElement.length ? scrollToElement.closest(".one-day-container") : $(".one-day-container:last");
setTimeout(function () {
            $('body.Office .use-custom-scrollbar').mCustomScrollbar("scrollTo", scrollToElement, {
                        scrollInertia: 0
              });
}, 0);

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

Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows: <ul class="product"> <li><a href="#myanmar" class="active">Mya ...

javascriptjqueryhtmlcssonclick

Exploring an XML document with HTML

I have an XML file that is paired with an XSL file. The resulting output can be located here. I am working on creating an HTML webpage where users can input a search query, such as 'Year < 2009', into a search box. The table above will then d ...

javascripthtmlxmlxsltfiltering

Encountering a Mongoose issue while attempting to load model files from a separate Mean.js project using the require function

I am currently working on a Mean.js project and in the process of familiarizing myself with this environment. To conduct some experiments, I created a parallel project for testing purposes in a separate folder where I am not using the Mean.js framework but ...

javascriptnode.jsmongoose

The Protractor test scripts are running with lightning speed, outpacing the webpage loading time

Seeking guidance on automating an angular js website with login functionality. Need to click on the sign-in link and enter username and password, but facing issues with script execution speed being faster than page load. Here is my approach for handling th ...

javascriptangularjsseleniumselenium-webdriverprotractor

Can a sophisticated text editor be utilized without a content management system?

Many website builders utilize rich text editors as plugins to enhance content creation, such as in CMS platforms like Joomla and WordPress. However, can these same editors be easily integrated into a custom website built from scratch using just HTML, PHP ...

javascripthtmltextcontent-management-systemeditor

Unable to retrieve parameter while making a POST request

Need some help with attribute routing. I'm having trouble getting parameters from the HTTP body. The ConnectionID Class includes a property named CValue. $('#btn').click(function () { $.ajax({ type: "POST", url: "http:// ...

javascriptasp.netajaxasp.net-web-apiasp.net-web-api-routing

What is the best way to position elements on a bootstrap card?

Welcome to my first post! I'm currently experimenting with Bootstrap 5 to create some stylish cards. One of the challenges I'm facing is achieving uniform width and height for all the cards. Specifically, I want all my cards aligned based on a ...

cssbootstrap-5

Struggling to add a border to an HTML div element

I'm completely baffled as to why I can't seem to add a border around my div. Here is the link to my jsfiddle: http://jsfiddle.net/4HnKs/1/ It's possible that I've been staring at my computer screen for too long, but no matter how hard ...

csshtmlborder

I have successfully set up micro-cors on my system, and as I tried to compile, I received the following outcome

While working on the Next.js Stripe project, I ran into an unexpected problem that I need help with. ./src/pages/api/webhooks.ts:3:18 Type error: Could not find a declaration file for module 'micro-cors'. 'E:/Project/longlifecoin/node_module ...

javascriptreactjstypescriptstripe-payments

Extracting Data from Web Pages

How can I efficiently extract data from a webpage with dynamic loading using AJAX? For instance, imagine a webpage that initially shows 20 images, but as the user scrolls down, more images are loaded (similar to Facebook). In this scenario, how would you ...

c#htmlajaxscreen-scraping

The incorrect order of CSS in NextJS production build

When working on my project, I make sure to import CSS files both from local sources and node modules: //> Global Styling // Local import "../styles/globals.scss"; // Icons import "@fortawesome/fontawesome-free/css/all.min.css"; // Bootstrap import "boot ...

javascriptreactjswebpacknext.js

Determine the placement of the body with CSS styling

Here is the code snippet from my website: body { background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .centered { /* Center entire body */ display: flex; ...

htmlcss

Make the object rotate around a specified vector point

I have been trying to figure out how to make an object orbit around the vector coordinates 0,0,0. Specifically, if the object is at X300, Y50, Z200, I want it to revolve around 0,0,0 without changing the position on the Y axis. Math isn't my strong su ...

javascript3dthree.js

Send key-value pairs to the function using ng-model

I am currently working on a functionality that involves extracting an object from json and displaying its key-value pairs using 'ng-repeat' in AngularJS. The form includes checkboxes where the value can be either true or false, determining if the ...

javascriptangularjsjson

"Troubleshooting a Node.js JWT issue in a React.js

I've been diving into backend development and recently created some small APIs. They all function perfectly in Postman, but I encountered an issue when attempting to execute this particular call const onSubmit = async () => { try { setIsL ...

javascriptnode.jsreactjsexpress

React: Should we use useCallback when creating a custom Fetch Hook?

Currently delving into the world of React on my own, I've come across this code snippet for a custom hook that utilizes the fetch() method. import { useState, useEffect, useCallback } from "react"; import axios from "axios"; funct ...

javascriptreactjsreact-hooksfetch-api

Changing the size of text in jquery for selected text can be done using the resize

Is there a way to change the font size of text within a specific div when it is selected by the user? I have the JavaScript code, but I need to resize the font size of the focused or currently selected div only. $("#slider").on("change",function(){ ...

javascriptjquery

Why is my column getting devoured even though it has custom content tailored to it?

In my layout, I have one column, one row, and three nested columns. Each column contains a custom-designed button instead of using the default Bootstrap button. However, there seems to be an issue where one of the columns is getting cut off. To better und ...

htmlcsstwitter-bootstrap

Saving JavaScript variables to a JSON file

In my possession is a JSON file named example_json.json, which contains the following data: { "timeline": { "headline":"WELCOME", "type":"default", "text":"People say stuff", "startDate":"10/4/2011 15:02:00", ...

javascriptjqueryjsonvariablesjsonp

PHP-based LESS compiler

Is there a way to compile LESS from PHP without using node.js or ruby? I came across a PHP implementation called LESSPHP on Google, but it seems outdated and doesn't support newer features. Would using the V8js API to run less.js work, even though i ...

phpjavascriptv8less