When using iScroll, it requires specifying both a width and height. However, when dealing with a responsive website, how can you accurately define a fixed

I am currently working on making my website responsive and I am interested in integrating iScroll 5 into my mobile site. However, I have encountered an issue where the scrolling becomes jerky unless I specify a width and height for certain elements.

For example, I have multiple divs with width:100%; or divs that adjust their size based on content. How can I properly define the height and width to resolve this issue?

"iScroll requires specific dimensions for both the wrapper and scroller elements. While these are calculated at startup, if the elements change in size, we need to inform iScroll so it can adjust accordingly."

jquerycss

Answer №1

I'm a little confused about your issue.

<div id="wrapper">
    <div class="scroller">
        <div class="content">
            <!-- Stuff -->
        <div>
    <div>
<div>

If you organize your content in this structure, all you need to do is specify the width and height for "wrapper" and "scroller". Just set the width for your content.

#wrapper {
    width: 100%;
    height: 100%;
    position: relative; /* or absolute */
}
.scroller {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
}
.content {
    width: 100%;
}

No need to define the height. Simply refresh iScroll after resizing to adjust to the new dimensions:

var scroller = new IScroll('#wrapper', {
    scrollX: false,
    scrollY: true,
    momentum: true,
    useTransform: true,
    useTransition: true,
    click: true
});

$(window).on('resize', function() {
    setTimeout(function() {
        scroller.refresh();
    }, 100);
});

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

Filtering similar to Excel in an ASP.NET program

I currently have an operational asp.net web forms application without MVC, which includes a gridview component. <asp:GridView ID="gvPendingInvoices" runat="server" AutoGenerateColumns="false" Width="60%" AllowPaging="true" AllowSorting="true" C ...

c#jqueryasp.netexcelgridview

Downloading files from Dropbox with the power of Ajax

Greetings, I am attempting to retrieve a specific file from Dropbox using AJAX. The initial response in the console was XHR finished loading: GET "https://content.dropboxapi.com/2/files/download". However, the subsequent response looked like this: %PDF-1 ...

javascriptjqueryajaxdropbox

Div with fixed positioning experiencing glitching until reaching a specific height

I've been struggling to resolve an issue with a script that is supposed to scroll down with the page and stop at a specific height. However, right before it reaches the desired point, it temporarily disappears and then reappears. For reference, here& ...

jqueryhtmlcssscrollposition

Hover state not responsive on screens of varying sizes due to style inconsistencies

Here are the CSS styles I'm using: @media (min-width: 769px) and (max-width: 992px) { .box:hover{ background-color:#000000; } } @media screen and (min-width: 993px) { .box:hover{ background-color:#ffffff; ...

cssmedia-queriesresponsive

Setting the text alignment using the innerHTML property of CSS

Having difficulty aligning text with innerHTML I am trying to create a link element using JavaScript, but I cannot get the text to align to the center. Here is my code: a= document.createElement('a'); a.style.cssText= 'font-size: 20px; curs ...

javascripthtmlcss

Bootstrap columns causing a collision

My website has a problem when viewed on mobile at 320 x 480 resolution. Two columns filled with text collide and mash up the text together. I initially tried without using columns, just "container-clearfix," but that did not resolve the issue. Check out t ...

htmlcsstwitter-bootstrap

Instructions on how to log in following the acquisition of a Google reCAPTCHA V3 key

I'm trying to implement logging in my website using ajax. However, I am facing an issue where I need to generate a Google key when I click login, before actually logging in. The function I have is as follows: $('#main-login-form').on('s ...

phpjqueryajaxlaravelrecaptcha

Why is jQuery automatically reloading my page after a basic function?

I have a basic HTML website and added a simple function to move an image to a different div when clicked by the user; function setimage(){ $(".moving_img").click(function(){ $('#target').after( $(this)); }); } However, after moving the ima ...

jquery

Modal feature malfunctioning in web browser

My function is not working in the mobile browser, but it works on desktop. I'm not sure why this is happening. Has anyone experienced this before? $('body').on('click touchstart', '.show_range', function(event) { alert(" ...

javascriptphpjquery

Prevent event propagation for a disabled element

I'm struggling with a button that has a specific style applied to it: pointer-events: none; This button is nested within a parent element that collapses. I'm trying to figure out how to stop the button from triggering the collapse event of its ...

javascriptjqueryevent-bubbling

What is the best way to display several markers on a Google Map at once?

I am currently working on a functionality where I retrieve latitude and longitude from a JSON file and display markers on a Google map. However, my issue is that only one marker is appearing on the Google map, while the others are not showing up. Below i ...

javascriptjqueryjsongoogle-mapsgoogle-maps-api-3

Tips for addressing flickering issues when scrolling on your device

I am facing an issue with two elements that are set to a fixed position on the page. When these elements reach the bottom of the page, I want them to revert back to a static position using JavaScript. The problem occurs when trying to scroll by clicking a ...

javascriptjqueryhtmlcss

Concealing information beneath a veil of darkness

I'm looking to implement a solution using JS/CSS/HTML5 to hide content within a div container with a shadow effect. The end result should resemble the example image I've provided. Additionally, I'd like the ability to customize the color of ...

javascriptjqueryhtmlcss

Make sure to include the "active" class in the pager once the slider begins

After coming across this fiddle, I noticed that it closely resembles the task I am working on. However, there is one issue - currently, only the first item has an active class when the slider autostarts. The next or previous items do not receive the acti ...

javascriptjquerybxslider

What is the best way to position the footer at the bottom of the page without obstructing any content?

I am currently working on a project that utilizes Bootstrap, and I am facing an issue with positioning the footer. Ideally, I want the footer to stay fixed at the bottom of the screen when there is not enough content to fill the page. However, when the con ...

htmlcssbootstrap-5

Using jQuery to make an Ajax request for interacting with buttons in a list

I currently have a list of stock data being displayed in a view within an ASP.NET MVC application. Each row in the list includes two images - a plus and a minus sign - at the end, allowing me to adjust the quantity of stock. The functionality works as expe ...

jqueryasp.net-mvcajax

Is there a way to update the value in a field with the help of the datatables plugin and jQuery

I am currently using a library called http://datatables.net to help with sorting my tables. I am generating JSON data and loading the rows into the table. For one particular record, I am creating a custom td element with a unique class. <td class=""> ...

jqueryjson

Is your server failing to respond to requests once there are too many within a session?

A web application I developed uses frequent $.ajax() calls to send and receive data between a virtual machine host and client. However, I have encountered a recurring issue where the connection cuts out after a certain number of consecutive calls within a ...

javascriptjqueryajaxapacheserver

My Flask application is experiencing issues loading CSS files from the project

My journey with Flask started off smoothly, but I hit a roadblock along the way. Here's how my project is structured: In the FlaskApp Folder, there are Templates (containing index.html, layout.html, styles folder, and javascript folder) and applicat ...

htmlcssflask

What is the best way to add a blur effect to the bottom layer as it

I'm looking to create a fixed top bar in my app. However, when the main page scrolls, the top bar ends up covering it. Is there a way to achieve a blurring effect on the main page when the top bar is overlaid on top of it? I've noticed that twit ...

javascripthtmlcssfrontend