防止在div上滚动
我有一个溢出的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 -->
感谢
1 个答案:
答案 0 :(得分：0)
你应该真正修复溢出的内容，这是真正的问题，但如果你仍然想要这样做，唯一的方法是使用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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？