我有一个div,溢出了,但是隐藏了水平滚动条。当用户试图通过鼠标或箭头键滚动它时,如何防止在 div 上实际滚动?这是这个 div 的代码,和一个快照
<!-- 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 -->
最佳答案
你真的应该解决真正问题的溢出内容,但如果你仍然想这样做,唯一的方法是使用 Javascript 并劫持鼠标事件。
这也将禁用文本选择
$('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>
关于html - 防止在 div 上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35528956/