Display the scrollbar only when the mouse cursor hovers over it

Is there a way to make a scrollable list show the scrollbar only on hover, while still allowing users to scroll with just one touch on mobile browsers like iOS and Android? I want it to behave as if the list always has overflow-y: auto. I've tried using this code snippet (http://codepen.io/sergdenisov/pen/RPazyg):

HTML:

<ul class="list js-list">
    <li>Test Test Test Test Test Test Test Test Test</li>
    ...
    <li>Test Test Test Test Test Test Test Test Test</li>
</ul>

CSS:

.list {
    -webkit-overflow-scrolling: touch;
    padding: 0 30px 0 0;
    overflow: hidden;
    height: 300px;
    width: 300px;
    background: gray;
    list-style: none;
}

  .list_scrollable {
      overflow-y: auto;
  }

Javascript:

$('.js-list').on({
    'mouseenter touchstart': function() {
        $(this).addClass('list_scrollable');
    },
    'mouseleave touchend': function() {
        $(this).removeClass('list_scrollable');
    }
});

Unfortunately, on mobile browsers, the scroll ability only activates after an additional tap on the list before scrolling. Any ideas on how to fix this?

Answer №1

My recommendation would be to simply include

  .list_scrollable {
      overflow-y: auto;
  }

within a media query specifically for mobile devices, ensuring it is always applied. Alternatively, you could update your CSS based on other suggestions provided in previous answers, rendering your JavaScript code unnecessary.

Answer №2

Don't forget, when using an iOS device, make sure to set overflow-y to scroll.

$(".list").on("touchstart touchend", function(){
  $(this).toggleClass("scroll");
})
.list {
  -webkit-overflow-scrolling: touch;
  padding: 0 30px 0 0;
  overflow: hidden;
  height: 300px;
  width: 300px;
  background: gray;
  list-style: none;
}

.list {
  /* Your CSS */
  overflow: hidden;
}
.list > li {
  max-width: 100%;
}
.list:active, .list:focus, .list:hover, .list.scroll {
  overflow-y: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list js-list">
  <li>Test Test Test Test Test Test Test Test Test</li>
  <li>Test Test Test Test Test Test Test Test Test</li>
  ... (repeated lines of test content)
  <li>Test Test Test Test Test Test Test Test Test</li>
</ul>

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

The click event fails to trigger on dynamically loaded Ajax content

I've encountered an issue while loading content using ajax from external HTML Files. After the content is loaded, the click event doesn't seem to be working in Safari (including mobile safari) for any of the newly loaded elements such as ul, li, ...

Utilize the ng-click feature for swiping interactions in Ionic v1

I have a slide page on Ionic V1 that utilizes previous and next buttons. Here is an example: <button id="" class="button button-slide prev no-animation" ng-click="prev()" ng-show="activeIndex > 0" > BACK </button> While the click function ...

Within Blade, Laravel and Vue components are able to communicate by sharing data from one component to another

Is it possible to achieve this task? Here is the scenario: I have a left navbar displaying membership status (active/inactive). Once the payment gateway receives the payment, a webhook is triggered via Paddle(Laravel Paddle API). During the webhook proc ...

A quick guide on updating table values in Laravel framework without the use of forms or JavaScript

Currently, I am immersed in my project where I need to fetch data from a table named 'Clients' in a database and exhibit it. Initially, this was quite straightforward. However, I now wish to modify certain information in the table. The challenge ...

Creating a JSON array using looping technique

I am attempting to construct a JSON array using a loop where the input className and value will serve as the JSON obj and key. However, I am facing difficulties in creating one and cannot seem to locate any resources on how to do so. Below is an example sn ...

Trouble connecting JSON elements to HTML using jQuery

Can someone help me troubleshoot this code? I've been struggling to extract elements from this JSON data. Here's what I have so far: $(document).ready(function() { $.getJSON('http://free.worldweatheronline.com/feed/weather.ashx?q=Stockholm ...

Difficulty encountered while using CSS to customize a vue template

I'm currently working on a login page and experiencing difficulty styling Vue templates using CSS. Here is the code that works without Vue: HTML <body class="text-center"> <form class="form-signin"> <h1 class="h3 mb-3 fon ...

Sending an array of text values to a Spring MVC endpoint through Jquery's Ajax functionality

When attempting to pass a list of Strings to an MVC controller using JQuery Ajax, I encountered the No mapping for POST /myUrl/myContext/p error message. Below is my jQuery function: $('#myButton').on('click', function(){ var stri ...

Error message in Leaflet JS: Unable to access property 'addLayer' because it is undefined when trying to display drawnItems on the Map

My attempt to showcase a Leaflet Map with polygon-shaped surfaces encountered an issue. Sometimes, I face the error "cannot read property 'addLayer' of undefined," but when the page is refreshed, the map renders correctly. I am unsure where I wen ...

Sharing Data Across Multiple Windows in Angular 2 Using a Singleton List

My multiplayer game involves adding new players to a single game room lobby, which is essentially a list of current players. How can I update this list for all connected players when new ones join? I implemented a service and included it in the providers ...

Error with YouTube API in Internet Explorer 8: Video not found

While using the iframe youtube api to handle video, everything runs smoothly on Chrome and Firefox. However, when trying to implement it on Internet Explorer 8, an error saying 'video' is undefined pops up. Any suggestions on how to resolve this ...

Issue with click event not being detected

When I click on one of the buttons with the class PhotoUploadSubmit, a custom click handler should be triggered to interact with sibling elements. However, the click handler does not function as expected and I am struggling to debug the issue. <div cla ...

What could be causing my click event to fail to register after sorting a WebGrid with a click?

Running into an issue with my webgrid and search button. It works perfectly if I search first, updating the grid with results. But when I click on a header to sort the grid, the search button stops working. Can't seem to figure out how to solve this d ...

Struggling to achieve a horizontal scroll using 'overflowX' in MUI, but unfortunately, it's not functioning as expected

Is there a way to create a properly-sized card with a horizontal scrollbar in a paper format? I've tried using 'overflow' but it doesn't seem to be working in this scenario. import React from 'react'; import { makeStyles } fro ...

Loading spinner in AngularJS for displaying during DOM rendering

I have a page with 8 tabs, each containing a lot of HTML controllers (data bindings), resulting in slow data rendering. To address this issue, I implemented an ng-if condition based on the active tab determined by ng-click. The active tab is visually indi ...

The dynamic loading of select tag options in Vue.js is not rendering properly

I'm having trouble displaying a select tag with options loaded from a Vue object. However, when I try to render it, something seems off: https://i.sstatic.net/odbC6.png Here is the HTML markup for the select tag: <div class="form-group ui-model" ...

Trigger and maintain click action in Javascript

I am currently in the planning stages of a project, and I'm facing an issue with a click and hold event. My goal is to have a div that allows me to click through it (meaning I can still interact with elements underneath), while having an opacity of ar ...

Having trouble launching Cypress on my Mac - stating that it cannot find Cypress

Despite searching through multiple answers on S.O, none of them have solved my issue. To better explain my question, I've created a video. You can view it here Everything was working perfectly just yesterday, so what could have possibly gone wrong? ...

What is the best way to ensure that my two sections stay vertically aligned, even when they have varying amounts of content and are scaled

I'm struggling to align two sections horizontally with varying content lengths, even when scaled. I attempted using display:flex in the .section part of my CSS, but it didn't yield the desired effect. Changing the flex direction also didn't ...

Utilizing form data to upload images and send them back to the front end within a React js application

I am working on a project using NestJS and React JS to create an image uploader. In React, I have the following setup: const props = { onChange({ file, fileList }: any) { const fd = new FormData(); fd.append('img& ...