2015-09-28 160 views
0

我只是想通过只在右边的栏不是鼠标滚动,触摸滚动股利(溢出滚动)。如何通过只滚动同一个div的滚动条来滚动div?

body 
 
{ 
 
    height:1000px 
 
} 
 
.news_list { 
 
    display: block; 
 
    overflow-y: scroll; 
 
    height: 200px; 
 
    width:200px; 
 
    margin:auto; 
 
    border:solid 1px; 
 
}
<body><div class="news_list"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, 
 
</div> 
 
</body>

回答

2

防止mousewheel事件中使用event.preventDefault()或返回false return false;

$('.news_list').on('mousewheel', function(e) { 
 
    e.preventDefault(); 
 
});
body { 
 
    height: 1000px 
 
} 
 
.news_list { 
 
    display: block; 
 
    overflow-y: scroll; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: auto; 
 
    border: solid 1px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="news_list"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, 
 
    sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. 
 
    Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. 
 
    Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. 
 
    Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla 
 
    mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, 
 
    </div> 
 
</body>

默认操作
+0

谢谢你的解决方案,它在桌面上工作,但在手机浏览器没有工作。 有帮助吗? – Prabhu

+1

@Prabhu:移动,'mousewheel'事件如何????????????? –

+0

我知道鼠标滚轮桌面,但我们有触摸移动,所以我不想滚动触及潜水部分。但在同一个div的侧滚动条上滚动。 – Prabhu

0

demo

$(".news_list").bind("mousewheel", function() { 
    return false; 
}); 

取消鼠标滚轮上的分度类news_list

+0

谢谢你的解决方案,它在桌面上工作,但在手机浏览器没有工作。任何帮助? – Prabhu

+0

使用手机时有没有老鼠?什么样的手机有鼠标呢? – guradio

+0

对不起,误解。我们有触摸滚动功能的权利? 所以我要防止由触摸滚动在div部, 作为滚动应该由同一div的侧滚动条来进行。 。 $( “news_list ”)结合(“ touchmove”,函数(){ \t e.preventDefault(); \t返回假; }); 这段代码将绑定div的所有触摸。 – Prabhu