Issue with skrollr: Unable to achieve smooth horizontal scrolling

I am currently working on a website project using the skrollr library. Here is the jFiddle link to my progress so far, but I am encountering some issues with the smoothScrolling feature. Even when I set smoothScrolling to true, it does not function as expected, and when set to false, there are still glitches.

skrollr.init({
    forceHeight: true,
    smoothScrolling:true
});
  1. I need help figuring out how to make smoothScrolling = true work properly.
  2. Additionally, I am looking for a solution to disable vertical scrolling without affecting skrollr functionality. I have tried various methods like setting overflow:hidden and following different links, but none seem to work seamlessly across browsers. Is there a universal workaround for this issue?

Thank you in advance for any assistance.

javascriptscrollbar

Answer №1

Looking to achieve smooth scrolling for the right direction? Consider adding a new wrapper element and applying data-smooth-scrolling="off".

http://jsfiddle.net/QRzLv/5/

If your goal is to hide the scrollbar, skrollr might not be the best solution for your needs.

Answer №2

Greetings Prinzhorn, I wanted to express my gratitude for your exceptional library. While your jsfiddle solution functions flawlessly in Chrome, it seems to be slightly glitchy in Firefox and non-functional in Safari. Do you have any recommendations for addressing these issues in those browsers? I am eager to incorporate horizontal scrolling into my project, and I've observed that it works seamlessly on the Walking Dead website. However, the code there appears to be overly complex.

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

Identifying the absence of a character at the end of the last line in Node.js to detect

Currently, I am processing data line by line from a buffer. Within the buffer, the data is structured as follows: name,email,phn test1,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47332234337607223f262a372b226924282a">[em ...

javascriptnode.jstypescript

How can I use AJAX to read an image file and display it on a Canvas?

Is there a way to read an image from my server using Ajax and then display it on Canvas? I am aware that this can be achieved by using normal image tags and canvas draw methods, as shown below: <img id="myImage" src="./ColorTable.PNG" style="display:n ...

javascriptjqueryajaxhtmlcanvas

Ensure that jQuery waypoints become unstuck upon reaching the footer area

Currently, I have successfully implemented jQuery waypoints for a sticky social media navigation. The only issue is that when the footer element is reached, the sticky navigation continues to scroll. My ideal scenario would be for the sticky nav to remain ...

javascriptjqueryhtmlcssjquery-waypoints

Connecting VueJS with External Javascript File to Trigger Functions from Template

Imagine you're working on a VueJS project and have a HelloWorld.js file structured as follows: export default { addNumbers: function (a,b) { return a+b; } } You then utilize this in your HelloWorld.vue file like so: <template> <div ...

javascriptvue.js

Passing form data to PHP using AJAX in CodeIgniter Framework

I'm facing an issue with my HTML structure which is as follows: <form method="POST"> Name : <input id="asgname" type="text"> <br> Description : <input id="asgdescription" type="text"> <br> <a href="#" id=" ...

javascriptajaxcodeigniterjquery

"Master the art of implementing a slide toggle effect with jQuery UI using

Looking to implement the jQuery UI slide toggle functionality in plain JavaScript... <center> <button id="button" class="myButton">Read More</button> </center> <div id="myDiv"> <p>Cool Read More Content Here. Lorem Ips ...

javascriptjquery

Is it possible for the handler to still be executed even after canceling an AJAX request?

After exploring the discussion on whether JavaScript is truly single-threaded, it is evident that despite JavaScript being primarily single-threaded, there are exceptions to keep in mind. I am curious about the predictability of the following pseudo-code ...

javascriptjqueryajaxjquery-deferredrequest-cancelling

What are some effective techniques for training a model with complex, multidimensional data?

I am working with an array of input data consisting of 5 arrays of varying lengths. What is the correct method to create a tensor and structure for training purposes? [ [ [ [ 1, 2 ], [ 1, 2 ] ], [ [ 1, 2 ], [ 1, 2 ] ], [ [ 1, 2, 3, 4, 5 ], [ 1, 2, ...

javascriptnode.jstensorflowmachine-learningtensorflow.js

Card Header with Bootstrap: <div class="card-heading card-heading-attention">

When attempting to use multiple bootstrap cards on a single page by simply copying and pasting the same code, I encountered an issue. My goal was to display two identical cards, but the second one was missing some design elements. Take a look at the code a ...

javascripthtmlbootstrap-4dashboardcard

The functionality of the <select-vue> component in Vue.js does not support null values

custom-select.vue <template> <div class="relative"> <label :for="$attrs.name" class="block text-sm font-medium leading-6 text-gray-900" >{{ $t($attrs.label) }} {{ required ? '*&ap ...

javascriptvue.js

Replace image source with a seamless transition

I have successfully changed the src of an image using a series of other images, but the transition is not smooth. It seems that the new image loads abruptly after the initial one fades out rather than simultaneously. Is there a clever way to achieve a com ...

javascriptjqueryhtmldom

Troubleshooting problem in jqGrid with Internet Explorer 11: Ignoring the first key entered when tabbing out of an

Encountering a strange issue with IE11 where the first character typed in an editable cell is being ignored. The scenario is, when a user enters data into a jqGrid cell and presses TAB, the same cell becomes editable again. However, the problem is that u ...

javascriptjqgridinternet-explorer-11

Alter the Default Visibility on an HTML Page from Visible to Hidden with JavaScript

I found this code snippet on a website and made some modifications. On my webpage, I have implemented links that toggle the visibility of hidden text. The functionality is working fine, but the issue is that the hidden text is initially visible when the p ...

javascriptjqueryhtmlarrays

the webpage is not displaying the style sheet properly

I have set up a local instance of nodejs and am currently running a web service that references a local index.html file upon startup. This web service is operating on my desktop. After experimenting with CSS, I've encountered an issue where the style ...

javascripthtmlcss

Update text using jQuery without deleting child elements

I need to modify this particular text content: <body> <p class="server_info"> GT 64 ms <b>|</b> Time: <span id="serverTime">4:21:26</span> <span id="serverDate">11/03/2014</span> ...

javascriptjquery

The compatibility issue between styled-components and create-react-library is causing some functionality to

Upon attempting to import styled-components into a create-react-library module, I encountered an error message: Error: 'typeOf' is not exported by node_modules\react-is\index.js, imported by node_modules\styled-components\dist ...

javascriptreactjs

I find it impossible to avoid using the withRouter and withAlert functionalities in Reactjs

When using withRouter, the alert.success property is not accessible. A TypeError is thrown with the message "Cannot read property 'success' of undefined". This issue prevents the successful display of alerts in my application. The error occurred ...

javascriptreactjsredux

The caret plugin feature in jQuery is dysfunctional in Internet Explorer

After successfully creating a complex script using the jQuery plugin at caret (http://code.google.com/p/jquery-at-caret/), I unfortunately discovered that it only functions properly in Firefox and Chrome, but not in Internet Explorer. The issue seems to b ...

javascriptjqueryjquery-plugins

Issue with Three.js failing to display textures

I'm a beginner with three.js and I'm struggling to get my texture to render properly in my scene. Despite following the documentation closely, all I see is a blank canvas with no errors in the console. Can anyone offer any guidance on why my code ...

javascriptthree.js

Guide on incorporating a customized HTML tag into ckeditor5

Can someone help me with integrating CKEditor and inserting HTML tag of a clicked image into the editor? I've tried different solutions but haven't been successful. I understand that doing this directly in CKEditor may not be secure. This is a V ...

javascriptvue.jsckeditor5