Questions tagged [scroll]

Is there a way to achieve a gradient fade effect on the opacity of an iframe and its content? To provide an illustration, think of the bottom of the notification centre in Mountain Lion or iOS. The concept involves having the content within an iframe grad ...

Is it possible to trigger a function when a specific div becomes visible on the page? This particular div is located in the middle of my content. I would like the function to execute when I scroll to that div with a specific ID or reference. I'm quite ...

I'm having an issue with displaying multiple images in a fixed-width div horizontally. I want to have a horizontal scroll bar for the images that exceed the width of the div. Currently, the images are appearing vertically instead of side-by-side. Is there ...

This question may be common, but despite my research efforts, I have been unable to find a solution. I want to issue a disclaimer that I am new to javascript and jQuery. Here is an overview of what I am trying to achieve: I want two images that, when cli ...

One of my goals is to ensure that when the viewport is taller than the content, the content is vertically centered. However, if the viewport is not tall enough and the content overflows, I want the parent element to provide a vertical scrollbar. How can I ...

I need to modify some text based on the position of a div element. A visual demonstration would be most helpful, so here's an animated gif showcasing what I hope to achieve: Below is the code that I am currently working with: https://jsfiddle.net/c0 ...

In my Vue application, I have a basic table structure: <tbody> <tr v-for="(item, index) in items"> <td> ... </td> </tr> </tbody> The items are dynamically added using the unsh ...

Is there a way to dynamically hide an element based on the user's scrolling behavior? I have incorporated floating social buttons into my website, and I am looking for a solution that will hide them when the user reaches the bottom of the page (foote ...

I've been experimenting with creating moving/scrolling text. After some trial and error, I've managed to achieve this effect. If you're interested, you can check out the code on CODEPEN. The issue that's currently bothering me is related to displaying t ...

I have been attempting to scroll through a webpage using Selenium at "https://jobsearch.az/vacancies". However, when you open the page and click on a job vacancy, there are two side-by-side pages that need to be scrolled. The challenge is to scroll the one ...

I am currently facing an issue with selecting a checkbox from a dropdown in jq widgets. The code seems to work fine when the element is visible on the screen, but fails otherwise. I have tried various methods such as executeScript and scrollIntoView to bri ...

I am trying to implement a feature where a div always scrolls down automatically. scrollDown(){ var chat = this.conversation; this.conversation.scrollTop = chat.scrollHeight; } checkKeyPress(e){ if (e.key == "Enter") { this.scrollDown(); .. ...

In Angular Material CDK, there is a special Directive called CdkScrollable that allows you to monitor ScrollEvents within a specific container. I am currently attempting to retrieve the CdkScrollable associated with the default MatSidenavContent. Unfor ...

I'm having trouble with my progressbar animation when scrolling. It seems to run multiple times instead of just once. I apologize if there's an error in my code. Could someone please assist me? This is the code I am using: <div class="demo-5" data-pe ...

Is it possible to create a table with a scrollbar on the right side using only CSS and without any plugins like jQuery? Additionally, I want the table header to remain fixed in place. What steps do I need to take to achieve this functionality? ...

How can I change the icons for the scroll buttons (left and right) on my Tabs component? I see that there is a prop called 'ScrollButtonComponent', but I am unsure how to use it to assign different icons to the left and right buttons. Here is a screensho ...

In an attempt to determine if an element has been scrolled out of view, I have implemented the following code: $(window).bind('scroll', function(){ var $btn = $('#intro div.summary a[href=#top]'); if($(window).scrollTop() > ($btn.offset().top+$ ...

I successfully implemented a dropdown menu using Material-ui's Menu component. However, I encountered an issue where the body scrollbar disappears when the dropdown menu is open, making it impossible to scroll through the page. My search for a soluti ...

I'm trying to create a navigation bar similar to Twitter. I want one specific div within the bar to scroll with notifications or news, while keeping the rest of the bar content unchanged. Any ideas on how to achieve this? Check out my code here. #navigati ...

Dealing with maintaining scroll bar positions has been proving to be a bit challenging for me lately. The Scenario I've got a horizontal image browser set up on one of my pages. It's designed to load images lazily, so it's capable of disp ...

I'm working on a web page that extends beyond the viewport, requiring users to scroll or swipe to see the entire content. I want to dynamically change the message from "swipe right" to "swipe left" based on the user's scrolling behavior. However, ...

Incorporating NextJs for Server Side Rendering has been a game-changer for me. I've also implemented a navbar in my application that needs to adjust styles based on the scroll position. Is there a way to determine if the window has scrolled beyond 100px ...

Currently, I am working on a web chat application using next.js. The app includes an emoji picker button, which, when clicked, displays a menu of emojis. However, the issue I am facing is that the user has to scroll down in order to see the emoji menu. I a ...

I need assistance with this particular code and .cscc .messages{ width:95%; height:200px; overflow:auto; } .message{ width:98%; &:hover{ background: #d6d6f0; cursor: pointer; } } .message-author{ float:left; } .message-date{ ...

I am currently working on a React class component that uses Post components. Within this component, there is a button that triggers the loading of more data from the database. The issue I am encountering is that when new data is fetched, the page automatic ...

For my website, I found this useful tool: It's been working great for me, but one issue I've encountered is that when I click on a picture using the tool, its opacity changes to 0 but the link remains in the same spot. I'm trying to figure ...

I am facing an issue in my AngularJS project where I need to scroll the active image to the top. However, when I tried using the element[0].offset() method, it threw an error. Let me explain the situation: In my code, I have hardcoded the active element ...

When using Selenium and Python, I am working on automating the process of clicking on targets.simple.csv to download a .csv file from the following page: This is the code snippet I have written: import pandas as pd import numpy as np from datetime import ...

I stumbled upon an interesting donut chart animation and I'm curious about how to activate the animation when scrolling? $(document).ready(function() { $('#circle-1').circliful(); $('#circle-2').circliful(); $('#circle-3').circliful(); }); body { ...

I am trying to showcase a list of basic HTML elements such as divs, paragraphs, etc. within a fixed height container, arranged in columns with consistent width. I want them to be horizontally scrollable, similar to the layout displayed in this image. Thi ...

Although this question has been asked previously, I have searched extensively for something similar to this - Incredible Things You can find what I have at Below is the code snippet: <div id="myElement"> <div id="nav"> <a href= ...

Is there a method for creating a overflowing div that conceals the overflow, does not display a scroll bar, but remains scrollable (via mouse wheel or touch input)? For example: <!DOCTYPE html> <div id="longtext" style="width:100px; height ...

I am encountering an issue with a webpage that dynamically loads HTML from a PHP script which scraps image links from another site when the user scrolls to the bottom of the page. The problem is that the scraping script takes some time to complete, causing ...

Recently, I came across this code snippet: jQuery(document).ready(function($){ $( window ).scroll(function() { var current_top = $(document).scrollTop(); var heights = window.innerHeight; document.getElementById("sHome").styl ...

Looking to showcase the seating arrangement in a cinema hall. If the seats occupy more than 50% of the page, I want a scroll bar to appear. Attempted using "overflow-scroll" without success. View result image <div class="w-50"> <div ...

Is it possible for the content in the header to scroll up, displaying only the navigation list and hiding the logo when a user scrolls on the website? Currently, while the header background slides up, the content within the header remains in place. I feel ...

I'm currently working with a front-end framework that utilizes a flex layout. In my development of an admin page, I have included sections for the sidebar, header, and main. My objective is to ensure that the sidebar and the header + main sections fun ...

Here is an example of a reading progress indicator where the width increases as you scroll down the page: http://jsfiddle.net/SnJXQ/61/ We want the progress bar width to start increasing when the article content div reaches the end of the article c ...

I'm facing an issue where I can't scroll to the bottom of the page. The problem arises when there are 300 records on a page - initially, only the first 15 sets of records are loaded. As the user scrolls down, another 15 sets of records are loaded and this ...

I am currently working on implementing a scrolling progress bar to show users how much of an article within a div they have read. For reference, something similar can be seen on this site. I have created my custom progress bar and coded it on fiddle, whe ...

In an attempt to organize my thoughts, I am facing a challenge with a search page similar to Google. The search results trigger a popup window when hovering over an icon, located to the right of the search results. Here is what I am looking to achieve with ...

I'm using a script to smoothly scroll to a specific .div on my webpage: $(".button").click(function() { $('html, body').animate({ scrollTop: $(".scrolltothis").offset().top }, 500); }); It works perfectly, but there's ...

Struggling to replicate a feature on a website where images gain opacity as you scroll down? Check out this site for reference: . While my current code somewhat achieves this effect, I'm having trouble figuring out how to apply a darker opacity gradually i ...

I successfully set up jQuery niceScroll on the body, but now I want different themed scrollbars on one page. Below is my code snippet: Here is my fiddle: http://jsfiddle.net/JPA4R/135/ <script> $(document).ready(function () { $("body").niceScroll ...

var newrow = $( "<tr id=" + mahs + ">" + "<td id="stt">" + $("#txtIncrement").val() + "</td>" + "<td id="mahs">" + mahs + "</td>" + "<td id="fullname">" + $("#txtFullname").val() + "</td> ...

I am interested in developing a gantt chart that displays days, months, and years at the top with tasks listed below. Here is my progress so far: https://i.stack.imgur.com/tr5y4.png In the image above, the scroll-x functionality works on everything incl ...

Picture a scenario where there is a button placed somewhere. Once this button is clicked, the text on it moves to my search bar. How can I also make the window scroll down to the search bar after the value is set in the Input element displayed below? ...

This is a sample Here is a component with a list of items: class HomeComponent { text = 'foo'; testObject = {fieldFirst:'foo'}; itemList = [ '1', '2', '3', '4', '5', '6', '7', ...

I'm currently working on a chat application and looking to implement pagination upon scrolling up (not down). I am in need of a directive for this task. Additionally, I would like to display a preloader while loading new page data. Can someone advise on ...

My goal is to automatically scroll to the bottom of a div whenever a new comment is added. Here's what I have been trying: gotoBottom() { let content = this.$refs.commentsWrapper; content.scrollTop = content.scrollHeight } The div containing the c ...

Currently, I am in the process of developing a rendering system for my application that extracts objects from a collection and processes them through JavaScript templates to generate additional children as the user scrolls through the page. The system is d ...

I am trying to execute a function once the scrolling momentum is finished in my react native SectionList. After going through the documentation, I discovered onMomentumScrollEnd. However, the problem is that onMomentumScrollEnd only works when we manually ...

I am encountering an issue with a webpage that displays around 20 pictures in separate divs stacked vertically. Below these 20 pictures, there is a "show more" button that, when clicked, loads another set of 20 pictures and appends them to the existing dat ...

Hello there, I am looking to implement a feature where a small button inside each division scrolls when the divisions are in view. I attempted to achieve this using the scrollTop() method, but it scrolls all divisions at once. I aim to replicate the scrol ...

I am currently developing a sketch web application (using angular) that utilizes one finger gestures for drawing. My goal is to enable vertical scrolling in the sketch content by using two fingers. However, when attempting to scroll with two fingers, Safa ...

Our website features a unique scrolling functionality where it starts off vertically and then switches to horizontal once the user reaches the bottom. This allows for a seamless transition between scrolling directions. In addition, users can easily naviga ...

[Apologies for any language errors] I need to create a scrollable view with scroll buttons, similar to the image below: Specifications: If the list overflows, display right/left buttons. Hide the scroll buttons if there is no overflow. Disable the le ...

I'm currently working on enhancing my website with a feature that changes the opacity of the first section to 0.4 when a user scrolls more than 400 pixels down the page. I attempted the following code without success: if($("html, body").offset().top ...

I came across an example of infinite scrolling and attempted to implement it myself. Despite correcting all the errors I could find, it still refuses to work. Below is the directive code: module.exports = /*@ngInject*/ function scrollDirective($rootScope ...

A brief tale: I am in search of a way to extract data from a website that features infinite scroll without actually implementing the infinite scroll feature myself. My plan is to create a script that will auto-scroll the page from the browser console, wai ...

After loading content via ajax, I am unable to scroll to the item, as the page remains at the top. Strangely, when I refresh the page dynamically with content caching enabled, the page scrolls to the desired target. var startPageLoader = function( pid, si ...

I am working on implementing scroll events to create a smooth "snapping" effect for the top sections of my webpage. While I have successfully captured and animated the scroll position, I am encountering an issue where the scroll event is being triggered mu ...

Currently, I am in the process of automating a task that involves finding a list of elements that match a specific string. The webpage I'm working with does not have a scrollbar for the entire page, but only for the left pane where most operations are perf ...

How can I style a scrollbar to match this specific design? https://i.stack.imgur.com/KTUbL.png The desired design specifies that the width of -webkit-scrollbar-thumb should be 5px and the width of -webkit-scrollbar-track should be 2px. However, it is pro ...

When using the scrollBy() method in the window object of JavaScript, there are two arguments required. But what do these arguments actually represent? The resource I am currently studying from states that it is "the number of pixels to scroll by," but I am ...

Upon investigating the initial query, we managed to implement D3js for identifying a scroll event. This allowed us to scroll the div #scroll-content from any location on desktop devices. However, we encountered an issue where this method does not function ...

Here's some HTML code featuring Bootstrap 4 elements. It showcases a fixed Header and Footer with scrollable Bootstrap Cards in between. When scrolling, the Headers may be hidden by the Cards. How can you adjust the layout so that the Cards scroll "behind" ...

During the development of a project in plain ReactJS, I added these two lines to my index.css: overflow-y: scroll; overflow-x: hidden; The purpose was to ensure a vertical scrollbar always appeared without causing a horizontal scrollbar even when there wa ...

I'm currently experiencing a challenge with adjusting the text on two specific pages. On one side, there is a box with text, while on the other are two MDL cards displaying dialogues. The trouble arises when I try to set a fixed position for the text ...

Currently, I am working on creating a footer that remains fixed at the bottom of the user's screen regardless of the screen size. However, I also want the header to transition from a fixed position to being part of the page when the user scrolls down. ...