Creating a CSS scrollbar that mimics touchscreen behavior by allowing all text to be movable

The touch apps I developed work great in kiosk mode on HD-sized screens in fullscreen using Chromium. Now, I want to showcase the site to individuals who want to check the content and functionality.

I can recommend that they use Chromium's dev mode, switch to the tablet in HD mode, and experience the original touch functionality. However, some of these individuals prefer traditional methods (such as printing the approximately 2000 content pages).

With touch, users can easily move the page up and down by touching the text area. However, when using a mouse, only the scrollbar is available. Is there a CSS trick to make the text area moveable on non-touchscreens?

htmlcss

Answer №1

For those seeking to make a desktop web element mimic mobile behavior with touch/tap event simulation, exploring Hammer.js may be a helpful resource:

To simply deactivate the mouse hover effect for specific elements, consider using this CSS snippet:

.yourClass {
  pointer-events: none;
}

For further insights on touch events, check out this valuable resource: Understanding touch events

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

AngularJS datetimepicker integrated in the HTML script tag

<div class='input-group date' id='datetimepicker'> <input type='text' class="form-control" ng-model="ctrl.startDate" /> <span class="input-group-addon"> <span class="fa fa-calendar"></span> ...

htmlangularjsbootstrap-4datetimepicker

CSS: Hover below the designated target to reveal an expanding dropdown menu

My initial solution involved toggling the visibility on and off when hovering. However, this approach is not optimal as the menu should smoothly transition into view. When the visibility is toggled, the user does not experience the intended transition effe ...

javascripthtmlcss

Scrolling with Jquery window.scrollTo results in the page becoming unresponsive

I'm currently revamping a website that features a header with 100% screen height, but I need it to shrink down to 0px when a user starts scrolling. The issue I'm facing is that once the header shrinks to 0px, the page content ends up slightly abo ...

javascriptjqueryhtmlcssscroll

Can we incorporate <a> tags in XML as we do in HTML?

Currently, I am honing my XML skills. I am planning to incorporate the <a> tag within the XML file in order to create a hyperlink to another webpage. ...

htmlcssxml

Tips for accurately aligning a relative p tag within a td

Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...

htmlcsshtml-tableposition

Tally up the values of selected checkboxes

  I'm in search of a method to tally up data-values associated with checkboxes. In the example provided below, selecting locations from the checkboxes results in the calculation of primary values, which are displayed in the green box. I also need to ...

javascripthtmljquerycssfunction

Tips for incorporating the .click function with an overlay

Having some trouble using the .click function in conjunction with jQuery Tools overlay. HTML: <p id="click">Click here:</p> <div class="pop"> <div> <p>Insert text here</p> </div> </div> jQuery func ...

javascriptjqueryhtml

Adding a caption aligned to the right edge of an image in Wordpress

Any suggestions on aligning an image caption under an image tag to its right hand edge? I attempted using a div, but it seems it's not allowed in WordPress. Can anyone recommend alternative CSS or tags that I could use for this purpose? ...

htmlcsswordpressimagecaption

XML powered jQuery menu

Admittedly, I have not yet used XML with jQuery. Below is a snippet of the XML: <folder title="Home"> <item title="Welcome" /> <folder title="My Photos"> <folder title="Holiday"> <item title="Photo 1" /> ...

jqueryhtmlxml

Text flickering unexpectedly during hover animation in Bootstrap

Encountered a peculiar issue where dark colors flicker during animation. Link to codepen Adding -webkit-backface-visibility: hidden partially resolves the problem, but it also affects font appearance by making it tighter and brighter. This issue is obser ...

cssbootstrap-4

Lowest value malfunctioning

I have encountered an issue with setting minimum values for 4 things. All 4 things are supposed to have the same minimum value as the first thing, but when moving the slider, everything goes back to normal and works fine. Where could the problem be origina ...

javascriptjqueryhtmlcssminimum

How to Conceal the <th> Tag with JavaScript

I attempted to conceal certain table elements using JavaScript. For <td> elements, it works fine: function hide(){ var x=document.getElementsByTagName('td'); for(var i in x){ x[i].style.visibility='hidden'; ...

javascripthtml

What is the best way to link data from SQL Server to an HTML webpage?

Seeking assistance on how to display data from a SQL Server database in an HTML page using JavaScript, AJAX, and jQuery without the need for C#, PHP, VB.NET etc. Can someone please provide some reference links or share example code? ...

javascriptjqueryhtmlsql-serverajax

vue-router: A guide to disabling the outline property of the CSS in router-link

I am having trouble disabling the outline of a css link element. I successfully disabled the outline of a regular link using a css class, but I am unable to do so with the <router-link> element. How can I disable the outline for this? .page-link, .p ...

cssvue.jsvue-router

Align images of varying sizes vertically within div containers, even when the image is larger than the div itself

I'm facing a challenge when it comes to aligning images vertically inside divs. The problem arises due to the following conditions: The images will have varying and unknown sizes. These images are larger than the divs they are contained in, requiri ...

javascriptjquerycssvertical-alignment

Discovering DOM elements positioned between two other well-established DOM elements can be achieved by utilizing a variety of methods

What is the most efficient and elegant way to select all elements between two specified elements using vanilla JavaScript? For instance, how can I target all elements between: <h2> and <hr> .. and the result should be an [ p, p, ul ] ... but & ...

javascripthtmlcss

CSS background images struggle to display properly in Safari, often not appearing even when checked in the debugger

I'm currently working on a website that I want to make responsive. I have set up a div ID that is supposed to appear once the width of a mobile device reaches a certain point. Here is the CSS code: #mobilenavbuttons1 { max-width: 750px; padding-top: ...

csssafaribackground-imagebackground-color

The image will only display upon receiving a link, not a path

Having some trouble displaying an image on my website, despite having successfully done so in the past for other projects. The image is located in the same folder as my HTML file. Here's what I've tried: <img src="reddit.png"/> <img s ...

javascripthtmlcssreactjsbootstrap-4

planning to append the author's name to the end of the title using CSS

Here is the HTML code I have: <div class='store_detail-level1'> <span class='book_name'>How To Avoid Climate Disaster</span> <br> <span class='author_name'>Bill Gates</span> < ...

css

Adjusting the empty image source in Vue.js that was generated dynamically

Currently experimenting with Vue.js and integrating a 3rd party API. Successfully fetched the JSON data and displayed it on my html, but encountering issues with missing images. As some images are absent from the JSON file, I've saved them locally on ...

javascripthtmlvue.jsvuejs2vue-component