Prevent scrolling on a div

Question

I have a div, which is overflowing, but the horizontal scroll bar is hidden. How can I prevent actual scrolling on the div, when the user tries to scroll it through the mouse or arrow keys? Here is the code of 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"> تعليقات</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="مراجعتك" 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"> إضافة</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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            
            <!-- 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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            
            <!-- 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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            
            
            <!-- 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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            
            
            <!-- 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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            
            
            <!-- 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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            
            
            <!-- 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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            <!-- 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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            
            
            <!-- 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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            
            
            <!-- 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;">جون سميث </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;">  
                                 منتج رائع! جودة مذهلة. يوصى  <br/> <a class=" lnk-like-share-comment" href="#"> إقرأ المزيد</a>
                                </div>
                        </div>
                    <!--/Review Desc -->
                    
                    <!--/hr -->
                     <div class="row padd-top-2">
                          <div class="col-sm-12 text-left font-size-12">  
                                 <hr>  
                                </div>
                        </div>
                    <!--/hr -->
                    
                    
                </div><!-- Wrapper -->
            </div><!-- REVIEW-->
            
            
            
            
            </div><!-- golden scroll ltr-->
            </div><!-- golden scroll rtl-->
        </div>
    <!-- /right content area -->

thanks

Possible duplicate of [DISABLE the Horizontal Scroll](http://stackoverflow.com/questions/17756649/disable-the-horizontal-scroll) — max, Feb 20 '16 at 21:03
You should fix the overflow...not disable the scroll. You're concentrating on the wrong problem. — Paulie_D, Feb 20 '16 at 21:10
HI Paulie_D, This is a client requirement. The overflow has to be there (for future use), but for now since there is nothing, they need want me to disable the horizontal scrolling. — user3772369, Feb 20 '16 at 21:12

score 0 · Answer 1 · answered Feb 20 '16 at 21:44

You should really fix the overflowing content that's the real issue, but if you still want to do it, the Only way is to use Javascript and hijack the mouse events.

This will also disable 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>

Prevent scrolling on a div

1 Answers1