Stop vertical scrolling in a designated div container

I am dealing with a div that is overflowing, but the horizontal scroll bar is not visible. How can I prevent actual scrolling on the div when the user attempts to scroll using the mouse or arrow keys? Below is the code for this div and a snapshot

<!-- right content area -->
    <div class="col-md-2 col-sm-2" >
         
        <!--parent row -->
            <div class="row" >
            <div class="col-sm-12 padd-top-40  top-links-content-tabs-highlight"><div class="div-filters"> Comments</div></div>
            </div><!-- parent row end-->
           
          <div class="golden-scroll-rtl" >
          <div class="golden-scroll-ltr">  
            <!--Blank Stars -->
            <div class="row">
            <div class="col-sm-12 padd-top-15" style="direction:rtl; margin-right:20px;">
                <span><img src="images/rating-star-blank.png"></span>
                    <span><img src="images/rating-star-blank.png"></span>
                    <span><img src="images/rating-star-blank.png"></span>
                    <span><img src="images/rating-star-blank.png"></span>
                    <span><img src="images/rating-star-blank.png"></span>
                
                </div>
            </div><!-- Blank Stars-->
            
            <!--Your Review -->
            <div class="row">
            <div class="col-sm-12 padd-top-15">
                <div style="width:90%;"><textarea class="form-control" placeholder="Your Review" rows="2" cols="1"></textarea></div>
                
                </div>
            </div><!-- Your Review-->
            
            <!--Add Button -->
            <div class="row">
            <div class="col-sm-12 padd-top-15">
                <button class="btn btn-info"> Add</button>
                
                </div>
            </div><!-- Add Button-->
            
            <!-- REVIEW -->
            <div class="row padd-top-10">
            <!-- Wrapper -->
                <div class="col-sm-12">
                <div class="row"> <div class="col-sm-12 font-size-16 text-left" style="margin-right:20px;">John Smith </div></div>
                    
                    <!-- stars -->
                    <div class="row" style="margin-right:20px; direction:rtl;">
                                <div class="col-sm-12 padd-top-10">
                                    <span><img src="images/rating-star-full.png"></span> <span><img src="images/rating-star-full.png"></span> 
                                    <span><img src="images/rating-star-full.png"></span> <span><img src="images/rating-star-full.png"></span>
                                    <span><img src="images/rating-star-full.png"></span> 
                                </div>
                        </div>
                    <!--/stars -->
                    
                <!--/Review Desc -->
                    <div class="row padd-top-10">
                        <div class="col-sm-12 text-left font-size-12 text-left" style="margin-right:20px;">  
                                Great product! Amazing quality. Highly recommended.  <br/> <a class=" lnk-like-share-comment" href="#">Read more</a>
                                </div>
                        </div>
                      
                     <!--/hr -->
                    <div class="row padd-top-2">
                        <div class="col-sm-12">  
                                <hr>  
                                </div>
                        </div>
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
           /* Repeat above review structure ...*/
            
            </div><!-- golden scroll ltr-->
            </div><!-- golden scroll rtl-->
        </div>
    <!-- /right content area -->

https://i.sstatic.net/wgesX.png thanks

htmlcss

Answer №1

To address the main issue of overflowing content, it is recommended to fix that first. However, if you are determined to proceed with this method, the only solution available is to utilize Javascript and intercept the mouse events.

This approach will also prevent text selection: 

$('html, body').on("mousedown", null, function(event) {
    return false;
});
.no{
 width:200px;
 height:100px;
 padding:20px; 
 font-size:22px; 
 background:#ddd;
 overflow-x:hidden;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="no">TEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</div>

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

Create dynamic modals in ReactJS that appear when a row is clicked

Engaged in a project for an undisclosed entity where patient data is retrieved from their API and displayed as modal on the page. Clicking on a modal reveals more threat information in another modal. The objective is for these modals to render based on a c ...

cssreactjstypescript

Using jQuery to reference my custom attribute---"How to Use jQuery to reference My

Can you explain how to reference a tag using a custom attribute in jQuery? For example, if I have a tag like this: <a user="kasun" href="#" id="id1">Show More...</a> I want to reference the tag without using the id. So instead of using: $( ...

javascriptjqueryhtmljquery-selectors

Exploring the process of passing parameters in Material-UI React styled components

Recently, I developed a new component const CategoryDialog = (props) => { const classes = useStyles(); console.log(props); return ( <div> <Dialog fullScreen open={props.dilaogOpenProp} TransitionCompone ...

javascriptcssreactjsmaterial-ui

Having trouble with the CSS `not` selector?

Below is the code snippet I experimented with XHTML <div> <span>Span1</span> <span>Span12</span> <span>Span13</span> </div> <div> <span>Span1</span> <span> ...

javascripthtmlcss

Show 1 Blog Post on a Separate AngularJS Page

I would like to show only Test Post 1 on the next HTML page titleDetails.html when the user clicks on Test Post 1 in index.html 1) titleDetails() in index.html: <a ng-click="titleDetails(post)">{{ post.title }} </a> 2) Controller Variables a ...

javascripthtmlangularjs

How to Make Page Slide in Either Direction Based on User Click Location

Although the title of my question may not be very descriptive, I am essentially trying to implement a functionality where a page will slide right if a user clicks a link to the right of their current active link, and slide left if they click a link to the ...

javascriptjqueryhtmlcssajax

How to position elements within a content block in HTML with a CSS stylesheet

Looking for guidance on how to align text and image within a block in HTML using only a .css file. Specifically, I need the text to be on the left side and the image on the right. Since I am new to CSS, I could use some direction on where to start. Any t ...

htmlcss

What are some ways to personalize the depth graph in amcharts?

I am having trouble modifying the depth graph amchart and I'm struggling to grasp how it functions and how to design it like the image below. Below is the link to the original graph that I am trying to customize: Link https://i.stack.imgur.com/nbWd ...

jqueryhtmlcsstwitter-bootstrapamcharts

Issue with MUI data grid not resizing properly within a grid container: The dimensions of the MUI data grid are not adjusting as anticipated

In my setup, I have a main grid <div> container that contains two child elements. One is the MUI <DataGrid />, and the other is a simple <div>: Here's how it looks in JSX (React): <div className="container"> <Da ...

cssreactjsmaterial-uimui-x-data-grid

REST, hypertext, and clients other than web browsers

I'm struggling to understand how a REST API can be both hypertext driven, as explained in this article, and still be machine readable. Let's say I create an API where one endpoint lists the contents of a collection. GET /api/companies/ When the ...

htmljsonhttprest

Designing draggable tags similar to those on LinkedIn, incorporating a parent div element containing an SVG image and text

Lately, I've been exploring the world of CSS and Angular. Can someone give me a jumpstart on using CSS to design an element like the one shown in this https://i.stack.imgur.com/vcR3Z.png image? Essentially, this outer tag consists of a div element th ...

htmlcssangularjs

Tips for showcasing additional choices within a SELECT element while incorporating floating labels and adjusting the size

I'm struggling to make a floating label work smoothly with an HTML select that has a size="5" attribute using Bootstrap 5.3.x. It seems like it's not possible without some hacks or missing information from the Bootstrap documentation. According ...

htmlcssbootstrap-5

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

javascriptjqueryhtmlcss

What purpose does tagging serve in my template for polymer property binding?

I'm currently exploring the way Polymer handles the rendering of properties in a custom element's template. I've come across some interesting behavior that I haven't been able to fully grasp yet. Specifically, I noticed that certain pro ...

javascripthtmlpolymer

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...

htmlcss

Implementing a customized mobile style sheet for Google Maps v3

Currently, I am attempting to enforce the Mobile stylesheet for Google Maps v3 JavaScript within a jQueryMobile application. Within the screen stylesheet, the zoom control consistently stays in the top left corner and my efforts to relocate it have proven ...

cssjquery-mobilegoogle-maps-api-3

Trouble aligning 'nav' to the center of the page in the metro-bootstrap.css file

Struggling with alignment issues in my navigation list while using 'metro-bootstrap.css' from . Despite numerous attempts, I can't seem to get it right. Visit advinadv.co.uk for a closer look. Any assistance would be greatly appreciated! Be ...

htmlcsstwitter-bootstrap

Apply the CSS style to make one element identical to another, while modifying a single property

I am currently working with the following CSS: input[type="text"] { border: 2px solid rgb(173, 204, 204); height: 31px; box-shadow: 0px 0px 27px rgb(204, 204, 204) inset; transition:500ms all ease; padding:3px 3px 3px 3px; } My goal i ...

css

Make your CSS and JS files smaller by using a PHP compression script in your WordPress child theme

  I am looking to implement a PHP script that will serve combined, pre-gzipped, and minified JS and CSS files. You can find the source code for this script here: https://code.google.com/p/compress/ I have a WAMP localhost with WordPress install ...

javascriptcsswordpresscompressionminify

Utilizing two distinct CSS frameworks within a single Rails application

At the moment, I have an application with its frontend built using Bootstrap 3 (leveraging the bootstrap-rails gem). Now, I am looking to incorporate the Materialize.css framework into the same app. After downloading the Materialize.css stylesheet, my conc ...

htmlcssruby-on-railstwitter-bootstrapasset-pipeline