里面元素滚动到底外部容器不滚动实例页面
回到相关文章 »代码:
CSS代码:
.test { width: 210px; height: 200px; overflow: auto; }
HTML代码:
<div id="test" class="test"> <img src="mm2.jpg"> </div>
JS代码:
$.fn.scrollUnique = function() { return $(this).each(function() { var eventType = 'mousewheel'; if (document.mozHidden !== undefined) { eventType = 'DOMMouseScroll'; } $(this).on(eventType, function(event) { // 一些数据 var scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = this.clientHeight; var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位 this.scrollTop = delta > 0? 0: scrollHeight; // 向上滚 || 向下滚 event.preventDefault(); } }); }); }; $('#test').scrollUnique();
效果:
如果页面没有滚动条,改变窗口高度……例如,F12打开控制台