原生JS，长按，滚轮，拖动，自定义滚动条，滚动条方向监测

浏览：791次- 评论：0次- 发布时间：2018-11-16

Html

Css


    动作







    去太平古驿道感受历史文化，到莲麻体验原浆头酒，去流溪河国家森林公园游船，到石门国家森林公园赏花…… 游船、赏花、散步、体验民俗活动，到广袤的乡村去感受大自然魅力、体验美丽乡村。继国庆前期百家旅行社首发团走进从化体验美丽乡村，从化国庆黄金周期间再次迎来游客客流高峰，记者7日从从化区获悉，据不完全统计，国庆黄金周期间，从化区共接待游客105.22万人次，实现旅游收入3.86亿元，同比分别增长3.06%和3.76%。莲麻、西和、温泉、流溪河国家森林公园、石门国家森林公园等特色小镇及乡村景区景点成为假日旅游旺地。
    针对国庆黄金周假期消费特点，从化在全区大型商场超市、旅游景点共设立42家消费维权站，为消费者提供咨询、维权服务，为市民及游客提供贴心维权服务。节日期间，全区旅游市场井然有序，实现假日消费“零投诉”。 焦点1 乡村游展风采 特色小镇人气旺 从化区全力打造的特色小镇等在假期成为游客旅游旺地，假日期间，以“莲麻小镇”“西塘童话小镇”“万花风情小镇”“温泉财富小镇”等为代表的从化乡村旅游地，民俗节庆活动多亮点纷呈，更带动特色小镇成为游客来从化乡村游的首选地。 其中，莲麻小镇国庆期间举行的2018年从化首届酒文化嘉年华等活动，共设头酒生产作坊、乡村小吃、一村一品等50多个展位，吸引了大批游客。
    据了解，从化首届酒文化嘉年华首要任务就是推广吕田头酒。吕田头酒是区级非物资文化遗产，一直以来，酿酒是莲麻客家人的一大传统。 活动期间，莲麻酒业、酒鬼街、十里酒巷、斗酒广场、杨记酒铺等与“酒”有关的地方都人头涌涌，引来不少“酒客”参观和试酒。现场还设置了酒文化长廊，展示吕田头酒的品质和工艺。除了赏酒、试酒，现场还重现了古代的"摔碗酒"。游客们体验了一把摔碗酒的乐趣。 在体验精彩有趣的活动之余，莲麻小镇本身的特有景致黄沙坑革命旧址纪念馆、莲麻花海、风雨桥、千年古官道等，也成为假期游客游玩参观的热门景点。
    除了莲麻小镇，西和风情小镇、西塘童话小镇、温泉财富小镇等处的景区景点在国庆假期期间也迎来了大量游客。西和小镇各个景区鲜花烂漫、溪流潺潺，不少游客慕名前来宝趣玫瑰世界作为村里“最具风情”的旅游景区，黄金周更是吸引不少游人，据介绍，目前园区玫瑰、醉蝶花等浪漫绽放，秋天看花儿朵朵开，别有一番韵味。园内几大片的花海引种了多种精品玫瑰品种，独有的浪漫情怀受到了不少外地游客的青睐。 焦点2 乡村景区景点旺 生态游受青睐 生态休闲旅游依然是从化区黄金周旅游的一大亮点。从化的优质生态资源和山水空气，吸引了大量游客在假期期间到从化来徒步、骑行、登山等。据辖区内重点景区景点反馈，在丰富的节日活动及多种节假日优惠产品带动下，黄金周期间，从化辖区内的多个景区景点森林公园人气旺，客流爆满。
    在流溪河国家森林公园，游客可抛却城市带来的烦恼，在这里尽情呼吸大自然的清新空气。或乘船游览流溪河湖，运气佳时，更可与候鸟白鹭来个秋天约会；或上猴岛与猴同乐；亦可步行观赏一年四季更换的森林花海景色（现时正是醉蝶花盛开的时期）。除此之外，市民还可到五指山景区徒步登三桠塘幽谷，登至五指山峰。 在石门国家森林公园门，假期不仅推出八折票价优惠，还推出了“七彩天池”、古兰圃、稻草节、石门溪流等以赏花为主的森林生态旅游。公园还把森林生态和鲜花结合，举办石门国家森林公园第三届稻草文化艺术节，展示了广州塔、森林小火车、孔雀、复兴号、铜钱龙、摩天轮等一系列精彩的稻草造型，体验和传承农耕文化。
    今年国庆期间，从化还结合古驿道为主题，在太平钱岗古驿道参与、举办了广东省定向大赛暨青少年锦标赛、太平古驿道定向大赛、艺道游等多项比赛活动，让各地游客在从化感受到了“生态+岭南文化”的独特魅力。 据悉，从化太平古驿道小镇也是全省首个以古驿道为主题的特色小镇，目前该小镇已完成古驿道精华段的建设，而从化古驿道游已纳入广州市十条乡村游精品路线之一。 焦点3 民宿游成“新宠” 温泉游提前“紧俏” 国庆期间，莲麻、米?、西塘等特色小镇的民宿入住率高，西塘、西和的一些乡村特色民宿几乎天天满房。据从化区民宿协会方面介绍，入住从化民宿的相当一部分是年轻人，从化民宿已成为新潮的“网红”“打卡点”。
    
----END








    --长按我--

window.onload = function() {
    /* 鼠标长按 */
    Object.prototype.longPress = function(callback, time = 800) {
        var mytimer = null
        this.addEventListener('mousedown', function() {
            mytimer = setTimeout(function() {
                callback()
            }, time)
        })
        this.addEventListener('mouseup', function() {
            clearTimeout(mytimer)
        })
    }

/* 滚动条滚动方向 */
    Object.prototype.onScrollType = function(callback) {
        var currentY = 0
        this.onscroll = function() {
            var wt = window.scrollY
            var type = ''
            if (wt > currentY) {
                type = 'Down'
            } else {
                type = 'Up'
            }
            currentY = wt
            callback(type)
        }
    }

//滚轮事件
    Object.prototype.mouseWheel = function(callback) {
        function wheel(e) {
            e = e || window.event
            if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) { //当滑轮向上滚动时  
                    callback('Up')
                }
                if (e.wheelDelta < 0) { //当滑轮向下滚动时  
                    callback('Down')
                }
            } else if (e.detail) { //Firefox滑轮事件  
                if (e.detail > 0) { //当滑轮向上滚动时  
                    callback('Up')
                }
                if (e.detail < 0) { //当滑轮向下滚动时  
                    callback('Down')
                }
            }
        }
        //给页面绑定滑轮滚动事件  
        if (document.addEventListener) { //firefox  
            document.addEventListener('DOMMouseScroll', wheel, false)
        }
        //滚动滑轮触发scrollFunc方法  //ie 谷歌  
        window.onmousewheel = document.onmousewheel = wheel
    }

//拖动事件

Object.prototype.drag = function(options) {
        var currentX = 0
        var currentY = 0
        var dragstart = false
        var _this = this
        this.addEventListener('mousedown', function(e) {
            if (document.setCapture) {
                document.setCapture()
            }
            dragstart = true
            if (options.position === 'absolute') {
                currentX = e.clientX - _this.style.left.replace('px', '')
                currentY = e.clientY - _this.style.top.replace('px', '')
            } else {
                currentX = e.clientX - _this.style.marginLeft.replace('px', '')
                currentY = e.clientY - _this.style.marginTop.replace('px', '')
            }
        })
        document.addEventListener('mousemove', function(e) {
            var newX = e.clientX - currentX
            var newY = e.clientY - currentY
            if (dragstart) {

if (options.range) {
                    newX = newX < 0 ? 0 : newX
                    newY = newY < 0 ? 0 : newY
                    newY = newY > options.range.clientHeight - _this.clientHeight ? options.range.clientHeight - _this.clientHeight : newY
                }

if (options.position === 'absolute') {
                    if (options.ban !== 'x')
                        _this.style.left = newX + 'px'
                    if (options.ban !== 'y')
                        _this.style.top = newY + 'px'
                } else {
                    _this.style.marginLeft = newX + 'px'
                    _this.style.marginTop = newY + 'px'
                }

if (options.callback) {
                    options.callback({
                        newX: newX,
                        newY: newY
                    })
                }

}
        })
        document.addEventListener('mouseup', function() {
            if (document.releaseCapture) {
                document.releaseCapture();
            }
            dragstart = false
        })
    }

//滚动条
    Object.prototype.scrollBar = function() {
        var contentStr = this.innerHTML
        this.innerHTML = ''
        var barHtml = document.createElement('div')
        barHtml.setAttribute('id', 'scroll-bar')
        barHtml.setAttribute('style', 'border-radius: 2px; z-index: 1; width: 4px;position: absolute;right:0;top:0;height:100px;background-color: rgba(0,0,0,0.5);')
        this.append(barHtml)
        var innerHtml = document.createElement('div')
        innerHtml.setAttribute('id', 'scroll-inner')
        innerHtml.setAttribute('style', 'position: absolute;left:0; top:0;overflow-y:scroll;')
        var contentHtml = document.createElement('div')
        contentHtml.setAttribute('id', 'scroll-content')
        contentHtml.setAttribute('style', 'width:100%;')
        contentHtml.innerHTML = contentStr

innerHtml.append(contentHtml)
        this.append(innerHtml)

var inner = this.querySelector('#scroll-inner')
        var bar = this.querySelector('#scroll-bar')
        var content = this.querySelector('#scroll-content')
        var scrollObjWidth = parseInt(this.style.width.replace('px', ''))
        var scrollObjHeight = parseInt(this.style.height.replace('px', ''))
        this.querySelector('#scroll-content').style.width = scrollObjWidth + 'px'
        this.querySelector('#scroll-content').style.height = scrollObjHeight + 'px'
        var dragstart = false

bar.style.height = scrollObjHeight / inner.scrollHeight * scrollObjHeight + 'px'

bar.addEventListener('mousedown', function() {
            dragstart = true
        })

document.addEventListener('mouseup', function() {
            dragstart = false
        })

this.querySelector('#scroll-inner').addEventListener('scroll', function() {
            if (dragstart) return
            bar.style.top = (inner.scrollTop / inner.scrollHeight) * scrollObjHeight + 'px'
        })

this.querySelector('#scroll-bar').drag({
            ban: 'x',
            range: this,
            position: 'absolute',
            callback: function(d) {
                console.log(d.newY)
                inner.scrollTop = d.newY * (inner.scrollHeight / scrollObjHeight)
            }
        })
    }

/*-----------------测试-----------------------------*/

document.getElementById('scrollBox').scrollBar() //滚动条

document.getElementById('me').drag({
        callback: function() {

}
    })

window.mouseWheel(function(type) {
        document.getElementById('status').innerHTML = '滚轮滚动中' + type
    })

window.onScrollType(function(type) {
        document.getElementById('status').innerHTML = '滚动条：' + type
    })

document.getElementById('me').longPress(function() {
        document.getElementById('me').innerHTML = '已长按'
        console.log('long...........down')
    })

document.getElementById('me').addEventListener('mouseenter', function() {
        document.getElementById('me').innerHTML = '--长按我--'
    })

}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：原生JS，长按，滚轮，拖动，自定义滚动条，滚动条方向

document.getelementbyid('scrollbox').scrollbar() //滚动条 
document.getelementbyid('me').drag({
    callback: function() {}
}) window.mousewheel(function(type) {
    document.getelementbyid('status').innerhtml = '滚轮滚动中' + type
}) window.onscrolltype(function(type) {
    document.getelementbyid('status').innerhtml = '滚动条：' + type
}) document.getelementbyid('me').longpress(function() {
    document.getelementbyid('me').innerhtml = '已长按'
}) document.getelementbyid('me').addeventlistener('mouseenter', function() {
    document.getelementbyid('me').innerhtml = '--长按我--'
})

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取