在该代码中,我使用鼠标滚轮来放大/缩小HTML5 Canvas.我找到了一些代码来规范Chrome和Firefox之间的速度差异.但是,Safari中的缩放处理要比其中任何一个快得多.
这是我目前的代码:
var handleScroll = function(e){
var delta = e.wheelDelta ? e.wheelDelta/40 : e.detail ? -e.detail/3 : 0;
if (delta) ...
return e.preventDefault() && false;
};
canvas.addEventListener('DOMMouseScroll',handleScroll,false); // For Firefox
canvas.addEventListener('mousewheel',handleScroll,false); // Everyone else
在Chrome v10/11,Firefox v4,Safari v5,Opera v11和IE9上滚动相同数量的鼠标滚轮时,我可以使用哪些代码来获得相同的"delta"值？
这个问题是相关的,但没有好的答案.
编辑:进一步调查显示一个滚动事件'up'是:
| evt.wheelDelta | evt.detail
------------------+----------------+------------
Safari v5/Win7 | 120 | 0
Safari v5/OS X | 120 | 0
Safari v7/OS X | 12 | 0
Chrome v11/Win7 | 120 … 我有一个div,带有滚动条,当它到达结尾时,我的页面开始滚动.无论如何我可以阻止这种行为吗？
我有一个包含一个iframe一个模式对话框窗口(弹出),
以及里面的iframe有一个DIV是滚动的.
当我滚动iframe的内部DIV,并且它已达到其上限或下限时,
浏览器本身的窗口开始滚动.这是一种不受欢迎的行为.
我尝试过这样的东西,当
onMouseEnter鼠标进入弹出框区域时会杀死主窗口滚动:
e.preventDefault()由于某种原因不能正常工作......
$("#popup").mouseenter(function(){
$(window).bind("scroll", function(e){
e.preventDefault();
});
}).mouseleave(function(){
$(window).unbind("scroll");
});
好像现在在2013年e.preventDefault();就够了......
我有一个可滚动的div,但无论何时到达它的底部/顶部,它都会开始滚动整个页面.这对于快速滚动的用户来说可能很烦人,然后整个页面开始意外滚动.
我需要一些东西,如果你将鼠标悬停在div上,页面就不可滚动了.
当我悬停div时,我通过添加CSS尝试了这个...
body {
overflow:hidden;
}
......它有效,但有一个问题.滚动条消失,看起来有点愚蠢,让它消失/重新出现.有什么方法可以达到相同的效果,但保持滚动条可见？我已经看到它与Facebook聊天完成.
如何防止滚动冒泡？
以下示例不起作用:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Bubbling</title>
<style>
#menu {
width: 80px;
height: 150px;
background: red;
overflow: auto;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function isScrollOnBound( scrollContainer ) {
if ( $( scrollContainer ).scrollTop() === 0 ||
$( scrollContainer ).scrollTop() + $( scrollContainer ).innerHeight() >= $( scrollContainer )[0].scrollHeight ) {
return true;
} else {
return false;
}
}
$(function() {
$( '#menu' ).on( 'scroll', function(e) {
if ( isScrollOnBound( this ) ) {
e.stopPropagation();
}
});
$( …当我在循环/无限网站上滚动时,我正在寻找正确方向的帮助/点/或闪烁/跳跃的解决方案,这可以在这个小提琴中看到.
似乎导致跳跃的是:
" $(window).scrollTop(half_way - child_height);",以及什么也可能是Chrome Windows的scrollTop错误,但它现在在所有浏览器中都会发生.
如果我删除" - child_height",则不再有闪烁,但页面不再正确滚动,这可以在这个小提琴中看到.
此外,在第一个卷轴上,右侧列向上跳了三个盒子 - 也因为' half_way',我可以通过给它一个" bottom: -600px;" 来修复
完整代码:
http://jsfiddle.net/djsbaker/j3d8r/1/
var num_children = $('#up-left').children().length;
var child_height = $('#up-left').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);
function crisscross() {
$('#up-left').css('bottom', '-' + window.scrollY + 'px');
$('#down-right').css('bottom', '-' + window.scrollY + 'px');
var firstLeft = $('#up-left').children().first();
var lastLeft = $('#up-left').children().last();
var lastRight = $('#down-right').children().last();
var firstRight = $('#down-right').children().first();
if (window.scrollY > …我有一个内部开发设备，高度固定，overflow-y: scroll;可以在y方向上滚动内容。当滚动达到顶部或底部时，外部div滚动。我想防止这种情况。
<section id="concept" class="testimonials bg-black">
<div class="col-lg-12">
<div class="concept-frame">
</div>
</div>
</section>
我使用以下JavaScript：
$( ".concept-frame" ).scroll( function(e) {
console.log( "Scolling ..."+$(this).scrollTop() );
e.stopPropagation();
} );
但是没有效果。如何停止滚动传播到外部div？
我的页面上有几个div看起来像这样:
<div style="height:200px; overflow:auto;">
<div style="height:300px;">
<!--Lots of text here-->
</div>
</div>
当用户将鼠标悬停在它们上面并使用滚轮滚动时,它们可以正常滚动.麻烦的是,当用户到达底部时,页面本身开始滚动.
有没有办法阻止这种情况发生(必要时使用javascript),以便焦点保持在div上,即使它已经滚动到底部,页面本身只在用户没有悬停在div上时滚动？
我有这个HTML设置......
body
.top
.content
top是固定的全屏弹出窗口,其中包含一些其他内容.但是,当滚动到达.top> ul的末尾时,背景项开始滚动.这是非常令人作呕的,并使网站在平板电脑上都变得缓慢.
在平板电脑上,即使我使用jquery添加隐藏到身体的溢出,它也不会因某种原因阻止它滚动背景,即使有时它没有到达终点.
当弹出窗口位于页面顶部时,我不想滚动背景页面.它假设是一张新幻灯片.
我能做什么更好的结构明智,然后css,最后js.
演示 http://jsfiddle.net/techsin/0bv9g31k/
* {padding: 0; margin: 0;}
.top {
position: fixed;
background-color: rgba(0,0,0,.3);
height: 100%;
width: 100%;
overflow: auto;
}
ul {
text-align: center;
background-color: rgba(23,44,134,.8);
color: #fff;
box-sizing: border-box;
overflow: auto;
height: 300px;
width: 50%;
margin: auto;
position: absolute;
top: 0; bottom: 0;
left:0;
right:0;
overflow: hidden;
}
.cont {
width: 400px;
margin: auto;
}
我需要在溢出区域重新实现滚动功能,以便鼠标滚轮改变当前选择而不是滚动位置.
要做到这一点,我至少需要阻止浏览器的默认滚动操作.我可以告诉knockout默认情况下,只要你不从事件处理程序返回'true'.
但它似乎不起作用,也没有明确地对事件调用'preventDefault'.此问题必须特定于scroll事件.
scrolled: function (vm, event) {
event.preventDefault();
return false;
}
javascript ×10
html ×7
jquery ×7
scroll ×5
css ×3
css3 ×1
events ×1
knockout.js ×1
mousewheel ×1