├── .npmignore ├── jquery.scrollintoview.min.js ├── webpack.src.js ├── bower.json ├── gulpfile.babel.js ├── .gitignore ├── package.json ├── jquery.scrollintoview.js ├── README.md ├── index.html └── webpack.bundle.js /.npmignore: -------------------------------------------------------------------------------- 1 | webpack.*.js 2 | index.html 3 | jquery.scrolledIntoView.js 4 | gulpfile.babel.js 5 | bower.json -------------------------------------------------------------------------------- /jquery.scrollintoview.min.js: -------------------------------------------------------------------------------- 1 | !function(n,i){function t(n){var t=i(n),o=i(window),r=o.scrollTop(),e=r+o.height(),l=t.offset().top,u=l+t.height();return e>=u&&l>=r}i.fn.scrollIntoView=function(n,o,r){var e=!1;return n=n||null,o=o||null,r=r||!1,i(window).scroll(function(){if(t(this)){if(r&&e)return;n&&(n(),e=!0)}else{if(r&&!e)return;o&&(o(),e=!1)}}.bind(this)),this}}(window,jQuery); -------------------------------------------------------------------------------- /webpack.src.js: -------------------------------------------------------------------------------- 1 | var $ = require('jquery') 2 | require('./jquery.scrollIntoView') 3 | $(function() { 4 | 5 | var mount = function() { 6 | $('body').css('background-color', 'red') 7 | console.log('hi') 8 | } 9 | var unmount = function() { 10 | $('body').css('background-color', '#fff') 11 | console.log('out') 12 | } 13 | $('.m2').scrollIntoView(mount, unmount, true) 14 | 15 | }) -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-scrollIntoView", 3 | "homepage": "https://github.com/egoist/jQuery.scrollIntoView", 4 | "authors": [ 5 | "AprilOrange " 6 | ], 7 | "dependencies": { 8 | "jquery": ">=1.8" 9 | }, 10 | "license": "MIT", 11 | "ignore": [ 12 | "**/.*", 13 | "node_modules", 14 | "bower_components", 15 | "test", 16 | "tests", 17 | "index.html", 18 | "gulpfile.babel.js" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /gulpfile.babel.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import uglify from 'gulp-uglify' 3 | import rename from 'gulp-rename' 4 | 5 | const paths = { 6 | js: './jquery.scrollintoview.js' 7 | } 8 | 9 | gulp.task('js', () => { 10 | gulp.src(paths.js) 11 | .pipe(uglify()) 12 | .pipe(rename({suffix: '.min'})) 13 | .pipe(gulp.dest('.')) 14 | }) 15 | 16 | gulp.task('watch', () => { 17 | gulp.watch(paths.js, ['js']) 18 | }) 19 | 20 | gulp.task('build', ['js']) 21 | 22 | gulp.task('default', ['build', 'watch']) 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git- 27 | node_modules 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery-scrollintoview", 3 | "version": "0.0.10", 4 | "description": "", 5 | "main": "jquery.scrollIntoView.min.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "gulp build", 9 | "dev": "gulp", 10 | "webpack": "webpack webpack.src.js -p --output-filename webpack.bundle.js" 11 | }, 12 | "author": "", 13 | "license": "MIT", 14 | "devDependencies": { 15 | "babel-core": "^5.8.24", 16 | "gulp": "^3.9.0", 17 | "gulp-rename": "^1.2.2", 18 | "gulp-uglify": "^1.4.1", 19 | "jquery": "^2.1.4", 20 | "webpack": "^1.12.2" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /jquery.scrollintoview.js: -------------------------------------------------------------------------------- 1 | ;(function (W, $) { 2 | 3 | function scrolledIntoView (mount, unmount, once) { 4 | 5 | var inView = false 6 | mount = mount || null 7 | unmount = unmount || null 8 | once = once || false 9 | 10 | $(window).scroll(function () { 11 | if (isScrolledIntoView(this)){ 12 | 13 | if (once && inView) { 14 | return 15 | } 16 | if (mount) { 17 | mount() 18 | inView = true 19 | } 20 | 21 | } else { 22 | 23 | if (once && !inView) { 24 | return 25 | } 26 | if (unmount) { 27 | unmount() 28 | inView = false 29 | } 30 | 31 | } 32 | }.bind(this)) 33 | 34 | return this 35 | } 36 | 37 | function isScrolledIntoView(elem) { 38 | var $elem = $(elem) 39 | var $window = $(window) 40 | 41 | var docViewTop = $window.scrollTop() 42 | var docViewBottom = docViewTop + $window.height() 43 | 44 | var elemTop = $elem.offset().top 45 | var elemBottom = elemTop + $elem.height() 46 | 47 | return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)) 48 | } 49 | 50 | $.fn.scrollIntoView = scrolledIntoView 51 | 52 | if (typeof module !== 'undefined') { 53 | module.exports = scrolledIntoView 54 | } 55 | 56 | })(window, (typeof window.jQuery !== 'undefined') ? window.jQuery : require('jquery')); 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jQuery.scrollIntoView 2 | 3 | When a DIV is scrolled into or out of the visible part of browser it executes a function. 4 | 5 | ![demo](http://ww4.sinaimg.cn/large/a15b4afegw1ew4n37b0hig211g0ha4qp.gif) 6 | 7 | ## Install 8 | 9 | ``` 10 | bower install jquery-scrollIntoView 11 | npm install jquery-scrollintoview 12 | ``` 13 | 14 | ## Usage 15 | 16 | **$.scrollIntoView(mount, unmount, once)** 17 | 18 | **mount**: function, executed when scrolled into the view 19 | **unmount**: function, executed when scrolled out of the view 20 | **once**: boolean, default is false, it will still trigger the function when the specific element is already visible in view unless `once` is set to be `true`. 21 | 22 | ```javascript 23 | $(function () { 24 | 25 | var mount = function () { 26 | $('body').css('background-color', 'red') 27 | console.log('hi') 28 | } 29 | var unmount = function () { 30 | $('body').css('background-color', '#fff') 31 | console.log('out') 32 | } 33 | 34 | $('.m2').scrollIntoView(mount, unmount, true) 35 | 36 | }) 37 | 38 | ``` 39 | 40 | ## License 41 | 42 | This project is released under SOX license that means you can do whatever you want to do, but you have to open source your copy on github if you let the public uses it. All copies should be released under the same license. The owner of each copy is only reponsible for his own copy, not for the parents, not for the children. 43 | 44 | permitted use: 45 | fork on github 46 | change 47 | do evil with your copy 48 | 49 | prohibted use: 50 | do evil with copies not of your own 51 | open source your copy without declaring your parent copy 52 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery.scrollIntoView 6 | 7 | 49 | 50 | 51 |

jQuery.scrollIntoView

52 |

try to scroll 'm2' into view and out

53 |
54 | m1 55 |
56 |
57 |
58 | m2 59 |
60 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /webpack.bundle.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){var r=n(1);n(2),r(function(){var e=function(){r("body").css("background-color","red"),console.log("hi")},t=function(){r("body").css("background-color","#fff"),console.log("out")};r(".m2").scrollIntoView(e,t,!0)})},function(e,t,n){var r,i;/*! 2 | * jQuery JavaScript Library v2.1.4 3 | * http://jquery.com/ 4 | * 5 | * Includes Sizzle.js 6 | * http://sizzlejs.com/ 7 | * 8 | * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors 9 | * Released under the MIT license 10 | * http://jquery.org/license 11 | * 12 | * Date: 2015-04-28T16:01Z 13 | */ 14 | !function(t,n){"object"==typeof e&&"object"==typeof e.exports?e.exports=t.document?n(t,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return n(e)}:n(t)}("undefined"!=typeof window?window:this,function(n,o){function s(e){var t="length"in e&&e.length,n=re.type(e);return"function"===n||re.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||0===t||"number"==typeof t&&t>0&&t-1 in e}function a(e,t,n){if(re.isFunction(t))return re.grep(e,function(e,r){return!!t.call(e,r,e)!==n});if(t.nodeType)return re.grep(e,function(e){return e===t!==n});if("string"==typeof t){if(fe.test(t))return re.filter(t,e,n);t=re.filter(t,e)}return re.grep(e,function(e){return Q.call(t,e)>=0!==n})}function u(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}function l(e){var t=ye[e]={};return re.each(e.match(ve)||[],function(e,n){t[n]=!0}),t}function c(){te.removeEventListener("DOMContentLoaded",c,!1),n.removeEventListener("load",c,!1),re.ready()}function f(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=re.expando+f.uid++}function p(e,t,n){var r;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(ke,"-$1").toLowerCase(),n=e.getAttribute(r),"string"==typeof n){try{n="true"===n?!0:"false"===n?!1:"null"===n?null:+n+""===n?+n:Ce.test(n)?re.parseJSON(n):n}catch(i){}Te.set(e,t,n)}else n=void 0;return n}function d(){return!0}function h(){return!1}function g(){try{return te.activeElement}catch(e){}}function m(e,t){return re.nodeName(e,"table")&&re.nodeName(11!==t.nodeType?t:t.firstChild,"tr")?e.getElementsByTagName("tbody")[0]||e.appendChild(e.ownerDocument.createElement("tbody")):e}function v(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function y(e){var t=$e.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function x(e,t){for(var n=0,r=e.length;r>n;n++)we.set(e[n],"globalEval",!t||we.get(t[n],"globalEval"))}function b(e,t){var n,r,i,o,s,a,u,l;if(1===t.nodeType){if(we.hasData(e)&&(o=we.access(e),s=we.set(t,o),l=o.events)){delete s.handle,s.events={};for(i in l)for(n=0,r=l[i].length;r>n;n++)re.event.add(t,i,l[i][n])}Te.hasData(e)&&(a=Te.access(e),u=re.extend({},a),Te.set(t,u))}}function w(e,t){var n=e.getElementsByTagName?e.getElementsByTagName(t||"*"):e.querySelectorAll?e.querySelectorAll(t||"*"):[];return void 0===t||t&&re.nodeName(e,t)?re.merge([e],n):n}function T(e,t){var n=t.nodeName.toLowerCase();"input"===n&&De.test(e.type)?t.checked=e.checked:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}function C(e,t){var r,i=re(t.createElement(e)).appendTo(t.body),o=n.getDefaultComputedStyle&&(r=n.getDefaultComputedStyle(i[0]))?r.display:re.css(i[0],"display");return i.detach(),o}function k(e){var t=te,n=ze[e];return n||(n=C(e,t),"none"!==n&&n||(_e=(_e||re("