jquery - CSS restrict overflow: scroll to selected element -



jquery - CSS restrict overflow: scroll to selected element -

i'm not sure if browser issue in webkit browsers, have div next css:

.fixed_box { position: fixed; top: 100px; height: 200px; width: 200px; overflow-y: scroll; }

when scroll within div , nail top of div, rest of page starts scroll if there overflowing elements, haven't scrolled there.

i need set .fixed_box scroll when mouse within , scrolling.

thanks

you can utilize mousewheel , dommousescroll function accomplish this. add together next jquery in code.

$('.fixed_box').on('mousewheel dommousescroll', function(e) { var scrollto = null; if (e.type == 'mousewheel') { scrollto = (e.originalevent.wheeldelta * -1); } else if (e.type == 'dommousescroll') { scrollto = 40 * e.originalevent.detail; } if (scrollto) { e.preventdefault(); $(this).scrolltop(scrollto + $(this).scrolltop()); } });

explanation:

here have used 2 type of function because in jquery 1.7+, detail property not available @ jquery event object. so, need utilize event.originalevent.detail property @ dommousescroll event. method backwards-compatible older jquery versions.

coming within part, getting values of mousewheel height, means when utilize mouse or downwards how much height should go , downwards of particular div. using preventdafault function execute time default action of event not triggered. manually moving scroll , downwards using bottom line calculation.

the if status checking whether getting value or not using mousewheel function. if not getting values, "null" value. bottom preventdefault , positioning won't work.

have fiddle!!

jquery html css

Comments

Post a Comment

Popular posts from this blog

model view controller - MVC Rails Planning -

model view controller - MVC Rails Planning - i'm starting rails , i'm building app stores films info, user can watch film , give grade on web application. i have coded cinema model, controller , views. now, have 2 questions: should need create model , controller grading? in case, should create or should wait , create first users model , controller? yes, on model , controller grades. that'd feasible way maintain track of who's graded what. it's create first, i'd start users, since grades depend on both films , users. ruby-on-rails model-view-controller
Read more

ruby on rails - Devise Logout Error in RoR -

ruby on rails - Devise Logout Error in RoR - while using devise in ror, encountering unusual error when trying log out url different root url. displays me : actioncontroller::invalidauthenticitytoken in devise::sessionscontroller#destroy" for illustration if rooting path after log in '/structure', , seek log out '/general' error, while logging out '/structure' fine. any help highly appreciated. ruby-on-rails ruby devise
Read more

html - Submenu setup with jquery and effect 'fold' -

html - Submenu setup with jquery and effect 'fold' - i want open submenu jquery effect fold, problem if user "hover effect" fast menu remain open, how can avoid this, jquery code is: $('ul.mainmenu li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $(this).children('ul').hide('fold', 500); } ); my jsfiddle link is: http://jsfiddle.net/9wkbf/ updated fiddle the reason behind problem is, first event $(this).children('ul').show('fold', 570); queued , until completes, sec animation not start. the next snippet can workaround $('ul.mainmenu > li').hover( function() { $(this).children('ul').show('fold', 570); }, function() { $('ul:not(.mainmenu)').hide('fold', 500); } ); *important note : work current scenario. jquery html css
Read more