关于横向滚动问题，请大神写一个简单的DEMO

2012-12-11 11:16:37 203 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

一款简单好用的UICollectionView横向滚动刷新控件 [点我跳转原文], 源码地址:(GitHub) 实现功能：接入简单，不侵入代码右拉刷新，左拉加载更多自定义提示文案和加载动画方便隐藏和显示加载提示文本和动画接入方式下载源码，将文件夹 “SideRefresh”添加进工程引入头文件 #import “UICollectionView+SideRefresh.h” 创建SideRefreshHeader和SideRefre... 阅读详情

接触JS很少，有一个功能需要求解。

比如现在需要做一个类似WIN8的页面，需要页面进行横向滚动
就是鼠标上下滚动，页面横向滚动。
IFRAME做也是可以的，这样更好改一些。
具体的效果比如这个网站：http://www.qileke.com/

想知道一下具体的方法，做个简单的DEMO给我就好

onmousewheel事件如何改变scrollLeft 并且造成移动。
谢谢大家，demo最好任何浏览器都可以生效

...全文

微信小程序scroll-view组件无横向滚动的解决方法微信开放文档中scroll-view组件的部分代码如下 <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view id="demo1" class="scroll-view-item_H demo-text-1">&... 阅读详情

十一啊

JavaScript 87,983 成员 224,680 内容

+ 关注 + 加入社区

切换为时间正序

scscms太阳光 2012-12-12

打赏
举报

<div id="out_div" style="border: 1px solid #ddd;height: 300px;width:99%;overflow: hidden;">
    <div style="width:6000px;height:300px;background: url('http://avatar.profile.csdn.net/3/2/D/1_nojobs.jpg')">
    </div>
</div>
<script type="text/javascript">
    function scrollFunc(e) {
        var direct = 0,i = id.scrollLeft;
        e = e || window.event;
        if (e.wheelDelta) {
            direct = e.wheelDelta;
        } else if (e.detail) {
            direct = e.detail;
        }
        if (direct < 0) {
            i +=speed;
        } else {
            i -=speed;
        }
        id.scrollLeft=i;
        //$("#out_div").stop().animate({scrollLeft:t},"slow");如果用jquery就在此做动画，滚动就不会生硬。
    }
    var id=document.getElementById("out_div");
    var speed=40;//调整速度
    if (document.addEventListener) {
        id.addEventListener('DOMMouseScroll', scrollFunc, false);//Firefox
    }
    id.onmousewheel = scrollFunc; //IE
</script>

经过IE8,ie6(添加width:99%就是因为IE6)，360，chrome,safari,傲游，firefox测试

scscms太阳光 2012-12-12

打赏
举报

if (document.addEventListener) { id.addEventListener('DOMMouseScroll', scrollFunc, false);//Firefox } id.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari 这样试试 window.onmousewheel=document.onmousewheel=scrollFunc;//这样表示鼠标在整个网页中滚动鼠标都起作用，上面我写的是想鼠标在滚动区域内滚动才起作用。

tcpfeng 2012-12-12

打赏
举报

要这个http://www.qileke.com/来改不就行了

十一啊 2012-12-12

打赏
举报

引用 4 楼 xzy21com 的回复:

XML/HTML code?1234567891011121314151617181920212223242526272829<div id="out_div" style="border: 1px solid #ddd;height: 300px;overflow: hidden;"> <div style="width:6000px;height:300px;b……

百度一下好像是这样： if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }//W3C window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari </script> 具体怎么改呢。。

十一啊 2012-12-12

打赏
举报

引用 4 楼 xzy21com 的回复:

XML/HTML code?1234567891011121314151617181920212223242526272829<div id="out_div" style="border: 1px solid #ddd;height: 300px;overflow: hidden;"> <div style="width:6000px;height:300px;b……

话说谷歌浏览器无效，火狐是好用的

scscms太阳光 2012-12-12

打赏
举报

<div id="out_div" style="border: 1px solid #ddd;height: 300px;overflow: hidden;">
    <div style="width:6000px;height:300px;background: url('http://avatar.profile.csdn.net/3/2/D/1_nojobs.jpg')">
    </div>
</div>
<script type="text/javascript">
    function scrollFunc(e) {
        var direct = 0,i = id.scrollLeft;
        e = e || window.event;
        if (e.wheelDelta) {
            direct = e.wheelDelta;
        } else if (e.detail) {
            direct = e.detail;
        }
        if (direct < 0) {
            i +=speed;
        } else {
            i -=speed;
        }
        id.scrollLeft=i;
        //$("#out_div").stop().animate({scrollLeft:t},"slow");如果用jquery就在此做动画，滚动就不会生硬。
    }
    var id=document.getElementById("out_div");
    var speed=40;//调整速度
    if (document.addEventListener) {
        id.addEventListener('DOMMouseScroll', scrollFunc, false);//Firefox
    }else{
        id.onmousewheel = scrollFunc; //IE
    }
</script>

十一啊 2012-12-12

打赏
举报

引用 9 楼 xzy21com 的回复:

XML/HTML code?12345678910111213141516171819202122232425262728<div id="out_div" style="border: 1px solid #ddd;height: 300px;width:99%;overflow: hidden;"> <div style="width:6000px;height……

谢谢你的帮助！

十一啊 2012-12-12

打赏
举报

没有大神在了么？求帮助

十一啊 2012-12-11

打赏
举报

......这么苦力的活，我还求助什么劲了，已经找了好半天了

-晴天 2012-12-11

打赏
举报

到这些JS里去找吧 <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js?v=7251046"></script> <script type="text/javascript" src="js/jquery/jquery-ui-1.8.23.custom.min.js?v=7251046"></script> <script type="text/javascript" src="js/jquery/jquery.easing.1.3.js?v=7251046"></script> <script type="text/javascript" src="js/jquery/jquery.imagesLoaded.js?v=7251046"> </script> <script type="text/javascript" src="js/jquery/jquery.backstretch.min.js?v=7251046"> </script> --> <script type="text/javascript" src="js/jquery/jquery-custom-min.js?v=12925"></script> <script type="text/javascript" src="js/extjs/ext-all.js?v=7251046"></script>  <script src="http://a.tbcdn.cn/apps/top/x/sdk.js?appkey=21253190"></script> <script type="text/javascript" src="js/build/qileke-min.js?v=115"></script> <!-- <script type="text/javascript" src="js/page/app.js"></script>

关于横向滚动问题，请大神写一个简单的DEMO

相关推荐