横向滚动条 根据滚轮滚动而移动 制作 与 问题处理

今天做一个项目的时候要用到 ‘横向滚动条 根据滚轮滚动而移动’

上网上查了很多资料

还找了一些插件 !  都不是很好用

然后自己大概查了下资料

找到一个大概比较靠谱的

HTML

<div style="width: 5000px;">test</div>

jQuery

$(function() {
    // 设置每次滚动长度,单位 px
    var scroll_width = 100;
    var scroll_events = "mousewheel DOMMouseScroll MozMousePixelScroll";
    $(document).on(scroll_events, function(e) {
        var delta = e.originalEvent.wheelDelta || e.originalEvent.detail;
        // 滑轮向下滚动,滚动条向右移动,scrollleft+
        if(delta > 0) {
            $("html").scrollLeft($("html").scrollLeft() + scroll_width);
        }
        // 滑轮向上滚动,滚动条向座移动,scrollleft-
        else {
            $("html").scrollLeft($("html").scrollLeft() - scroll_width);
        }
    });
});

Javascript

window.onload = function() {
    // 监听鼠标滑轮
    var mousewheelevt = (/Firefox/i.test(navigator.userAgent))
        ? "DOMMouseScroll" : "mousewheel";
    if(document.attachEvent) {
        document.attachEvent("on" + mousewheelevt, function(e){
            mousewheel_event(e.wheelDelta);
        });
    }
    else if(document.addEventListener) {
        document.addEventListener(mousewheelevt, function(e){
            mousewheel_event(e.detail);
        }, false);
    }

    // 设置每次滚动长度,单位 px
    var scroll_width = 100;

    function mousewheel_event(delta) {
        // 滑轮向下滚动,滚动条向右移动,scrollleft+
        if(delta > 0) {
            document.getElementsByTagName("html")[0].scrollLeft
                += scroll_width;
        }
        // 滑轮向上滚动,滚动条向座移动,scrollleft-
        else {
            document.getElementsByTagName("html")[0].scrollLeft
                -= scroll_width;
        }
    }
};

参考资料:http://zhidao.baidu.com/link?url=Yp2GVSsADxq1T2dox5iDha0XDEl5k7RSSiffCLGg9dmxSjRXtdKLLdwreSxVo8uOK1YrQUyvoU9p-ssoRpC2f_

jquery的方法我尝试了一下  发现在IE ok 在Chrome 下并不能 正常执行

我查找了下原因

发现chrome 下

 $("html").scrollLeft()

永远为0

在国内找不解决方法 就去

http://stackoverflow.com/ 找了一下  关键词:chrome scrollLeft

果然找到一篇文章

http://stackoverflow.com/questions/13927430/html-scrollleftvalue-not-working-in-chrome

原来chrome 中不能使用

$("html").scrollLeft()
而需要
$(window).scrollLeft(100);
时间: 2024-10-13 00:12:50

横向滚动条 根据滚轮滚动而移动 制作 与 问题处理的相关文章

发掘ListBox的潜力(一):自动调整横向滚动条宽度

<自绘ListBox的两种效果>一文帖出之后,从反馈信息来看,大家对这种小技巧还是很认同.接下来我将继续围绕ListBox写一系列的文章,进一步发掘ListBox的潜力,其中包括:自动调整横向滚动条宽度.即时提示(Tips).拖放插入点提示等,并在最后制作一个在滚动区内的ListBox组. 自动调整横向滚动条宽度 网上可以找到很多让Listbox产生横向滚动条的文章,其中的方法基本一样,就是定义一个函数,遍历Items取得最大的TextWidth值,然后发Listbox发消息LB_SETHOR

移动端禁用横向滚动条

在用bootstrap制作移动开发的时候,发现宽度并未超过屏幕宽度时,依然出现横向滚动条. 问题解决: 1.查看是否在head里面加入 /*等比例缩放*/<meta name="viewport" content="width=device-width, initial-scale=1.0">/*禁止缩放*/<meta name="viewport" content="initial-scale=1, maximum-

table左边固定-底部横向滚动条

是日有需求,曾探讨过table表单头部.尾部固定不动,中间内容随着滚动条的滚动而变化. 整合资料之际,发现有很多表格,表单展现中,横向数据很多.很长,不方便查看. 则,横空霹雳出了,此款:table表单左边固定,底部滚动条左右滑动展现数据demo. 原理很简单:在 table外面嵌套一层div ,并且设置此父div {overflow: auto;}.此举为了出席横向滚动条 对里面的tr设置{position: relative;}相对定位 对tr里面的第一个td设置fixed .fixed {

android 横向滚动条

/*** * 横向滚动条,修改版,从左向右滚动,支持html代码和html里面的网络图片 */public class MarqueeView extends LinearLayout { private Context context ; private TextView mTextField; private ScrollView mScrollView; private static final int TEXT_VIEW_VIRTUAL_WIDTH = 2000; private Ani

javascript 学习之自定义滚动条加滚轮事件

要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候,只要鼠标滚动的方法就行了,而这通过检测datail的正负号就可以确定 2.其他的用mousewheel(Ie是onmousewheel),通过检测wheelDelta 1 <!doctype html> 2 <html> 3 <head> 4 <title>拖拽

WPF,解决Listbox,按住ListboxItem向下拖出Listbox,横向滚动条跑到最后。

类似这种样式的控件,.,在横向滚动条隐藏的情况下有这样的问题.(横向滚动条显示的时候也会,,目前不知道怎么解决.) 因为这个控件偏移是利用ListBox的ItemsPanelTemplate模版里的StackPanel的宽度通过设置"(UIElement.RenderTransform).(TranslateTransform.X)"来偏移到指定位置. 所以的横向滚动条必须在最前面不能动,不然便宜位置会出错. 如图按住4,按住鼠标向下移动出ListBox,滚动条会自动跑到最后. 解决方

frame去掉横向滚动条【转】

如题,就是在网页中,只显示右侧的垂直滚动条,而不要底部的水平滚动条:这个问题让我挠头了半天. 做的那个管理界面,为了能让菜单在整个窗口中显示,我没有用Frame,而是用了iFrame:为了让iFrame窗口适用大小,我也用JavaScript代码做了判断: 插入iFrame的代码如下(我没有设宽高,宽高有Js代码控制的,这里不再描述)<iframe src="welcome.html" name="workArea" align="middle&qu

HTML横向滚动条和文本超出显示三个小圆点

我们这次要说的就是:现在有很多的公司以及很多的app软件经常使用的两个方法横向滚动条和文本超出三个小圆点 横向滚动条:顾名思义嘛,就是能够一块内容可以横着滑动. 文本超出三个小圆点:文本超出就是当文本的内容超出了我们的所定的盒子宽度,我们将多余的文本隐藏替换成i小圆点进行显示. 自己刚才写了一个简单横向滚动条的例子,我们看一下代码 html部分: <div class="top"> <div class="box_top"> <span

css之超出部分不换行且显示横向滚动条

我不是专业前端,所以折腾了老半天啊QAQ 需求是两个div,内层div不换行且超出时外层div显示横向滚动条 类似以下这种: 刚开始的代码如下: <div class="nowrap"> <div class="item-t"></div> <div class="item-t"></div> <div class="item-t"></div>