Search completed in 1.34 seconds.
209 results for "Scrolling":
Your results are loading. Please wait...
Scrolling Menus - Archive of obsolete content
« previousnext » this section will describe scrolling menus and how to use the mechanism with other elements.
...mozilla will provide a scrolling mechanism that will allow you to scroll through the items.
...note that the exact behavior of the scrolling will depend on the current theme.
...And 4 more matches
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
the -webkit-overflow-scrolling css property controls whether or not touch devices use momentum-based scrolling for a given element.
... syntax values auto use "regular" scrolling, where the content immediately ceases to scroll when you remove your finger from the touchscreen.
... touch use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen.
...And 3 more matches
Square tilemaps implementation: Scrolling maps - Game development
this article covers how to implement scrolling square tilemaps using the canvas api.
... rendering the map there are two main differences between rendering scrolling maps vs.
...while rendering scrolling tilemaps, the first tile will often be clipped.
...And 2 more matches
Document.scrollingElement - Web APIs
the scrollingelement read-only property of the document interface returns a reference to the element that scrolls the document.
... when in quirks mode, the scrollingelement attribute returns the html body element if it exists and is not potentially scrollable, otherwise it returns null.
... syntax var element = document.scrollingelement; example var scrollelm = document.scrollingelement; scrollelm.scrolltop = 0; specifications specification status comment css object model (cssom) view modulethe definition of 'scrollingelement' in that specification.
tabscrolling - Archive of obsolete content
« xul reference home tabscrolling new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the user may cycle through the results list by pressing the tab key.
textbox.tabScrolling - Archive of obsolete content
« xul reference home tabscrolling obsolete since gecko 1.9.1 type: boolean if true, the user may cycle through the results list by pressing the tab key.
tabScrolling - Archive of obsolete content
« xul reference tabscrolling type: boolean gets and sets the value of the tabscrolling (or tabscrolling) attribute.
Index - Web APIs
WebAPIIndex
the contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
... 962 document.scrollingelement api, document, property, reference, scrollingelement the scrollingelement read-only property of the document interface returns a reference to the element that scrolls the document.
... 998 document: pointercancel event api, document, event, pointerevent, onpointercancel, pointercancel the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
...And 14 more matches
Miscellaneous - Archive of obsolete content
example for firefox: services.startup.quit(services.startup.eforcequit|services.startup.erestart); mouse and keyboard detecting mouse wheel events when scrolling the mouse wheel on an element, the dommousescroll event fires.
... <div id="scrollarea" style="overflow: scroll; height: 6em; width: 10em;"> this is the scrolling area.
... this is the scrolling area.
...And 11 more matches
Scroll-linked effects
the definition of a scroll-linked effect is an effect implemented on a webpage where something changes based on the scroll position, for example updating a positioning property with the aim of producing a parallax scrolling effect.
... scrolling effects explained often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or transform property.) you can find a sampling of such effects at css scroll api: use cases.
... these effects work well in browsers where the scrolling is done synchronously on the browser's main thread.
...And 10 more matches
Tiles and tilemaps overview - Game development
scrolling tilemaps scrolling tilemaps only show a small portion of the world at a time.
... positioning and camera in all scrolling games, we need a translation between world coordinates (the position where sprites or other elements are located in the level or game world) and screen coordinates (the actual position where those elements are rendered on the screen).
... you can read more about implementing scrolling tilemaps and see some example implementations in square tilemaps implementation: scrolling maps.
...And 5 more matches
arrowscrollbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a box which provides scroll arrows along its edges for scrolling through the contents of the box.
... smoothscroll type: boolean true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it.
... currently, smooth scrolling supports horizontal arrowscrollboxes only.
...And 4 more matches
Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
the css scroll snap specification gives us a way to snap scrolling to certain points as the user scrolls through a document.
...the scroll-snap-type property is used on the scroll container to state the type and direction of scrolling.
... the scroll-snap-align property must be used on child elements in order to set the position that scrolling will snap to.
...And 4 more matches
<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementmarquee
the html <marquee> element is used to insert a scrolling area of text.
... direction sets the direction of the scrolling within the marquee.
... scrollamount sets the amount of scrolling at each interval in pixels.
...And 4 more matches
Index - Archive of obsolete content
1091 tabscrolling xul attributes, xul reference no summary!
... 1109 textbox.tabscrolling no summary!
... 1582 tabscrolling xul properties, xul reference no summary!
...And 3 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
ete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspo...
...pup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... tabscrolling obsolete since gecko 1.9.1 type: boolean if true, the user may cycle through the results list by pressing the tab key.
...And 3 more matches
HTMLMarqueeElement - Web APIs
htmlmarqueeelement.direction sets the direction of the scrolling within the marquee.
... htmlmarqueeelement.scrollamount sets the amount of scrolling at each interval in pixels.
... htmlmarqueeelement.onfinish fires when the marquee has finished the amount of scrolling that is set by the loop attribute.
...And 3 more matches
Theme changes in Firefox 2 - Archive of obsolete content
global/alltabs-box-overflow-bkgnd.png new file; the background for the "all tabs" drop-down menu when there are enough tabs to activate tab bar scrolling.
... global/tab-arrow-end-bkgnd.png new file; the background for the scrolling tab bar arrow at the right side of the tab bar.
... global/tab-arrow-end.png new file; the arrow drawn in the scrolling tab bar box at the right end of the tab bar.
...And 2 more matches
Overflowing content - Learn web development
notice how the scrollbars remain, even if there is no need for scrolling.
... as with scroll, you get a scrollbar in the scrolling dimension whether or not there is enough content to cause a scrollbar.
... note: you can specify x and y scrolling using the overflow property, passing two values.
...And 2 more matches
Gecko info for Windows accessibility vendors
event_scrollingend is used to indicate when a document has scrolled, even if only 1 line.
... gecko fires this event when the scrolling is finished, rather than fire excessive events.
... event_scrollingstart is fired when the user has jumped to a named anchor within the page.
...And 2 more matches
nsIScrollable
/docshell/base/nsiscrollable.idlscriptable this interface can be implemented by a control that supports scrolling.
... constant value description scrollorientation_x 1 horizontal scrolling.
... scrollorientation_y 2 vertical scrolling.
...And 2 more matches
overscroll-behavior - CSS: Cascading Style Sheets
the overscroll-behavior css property sets what a browser does when reaching the boundary of a scrolling area.
...you may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.
..."bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
...And 2 more matches
position - CSS: Cascading Style Sheets
WebCSSposition
sticky the element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left.
...note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling ancestor.
... mdn understanding wcag, guideline 1.4 explanations visual presentation: understanding sc 1.4.8 | understanding wcag 2.0 performance & accessibility scrolling elements containing fixed or sticky content can cause performance and accessibility issues.
...And 2 more matches
scrollbar-width - CSS: Cascading Style Sheets
initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete syntax /* keyword values */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; /* global values */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: unset; values <scrollbar-width> defines the width of the scrollbar as a keyword.
... accessibility concerns use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism.
... while swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative.
...And 2 more matches
touch-action - CSS: Cascading Style Sheets
/* keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (scrolling) and pinching gestures are handled exclusively by the browser.
... when a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element).
... pan-left, pan-right, pan-up, pan-down enable single-finger gestures that begin by scrolling in the given direction(s).
...And 2 more matches
Index - Archive of obsolete content
ArchiveMozillaXULIndex
360 tabscrolling xul attributes, xul reference no summary!
... 378 textbox.tabscrolling no summary!
... 851 tabscrolling xul properties, xul reference no summary!
... 1057 scrolling menus tutorials, xul, xul_tutorial this section will describe scrolling menus and how to use the mechanism with other elements.
textbox (Toolkit autocomplete) - Archive of obsolete content
ompletedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimag...
...ecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... tabscrolling new in thunderbird 3requires seamonkey 2.0 type: boolean if true, the user may cycle through the results list by pressing the tab key.
... tabscrolling type: boolean gets and sets the value of the tabscrolling (or tabscrolling) attribute.
-ms-scroll-chaining - Archive of obsolete content
the -ms-scroll-chaining css property is a microsoft extension that specifies the scrolling behavior that occurs when a user hits the scroll limit during a manipulation.
...the nearest scrollable parent element begins scrolling when the user hits a scroll limit during any manipulation.
...in this case the image container has its -ms-scroll-chaining property set to chained, which means that when a user is scrolling through a nested scrollable element and it hits its boundary the parent scrollable element will begin to scroll in the same direction.
...for more information, see html scrolling, panning and zooming sample or internet explorer 10 scrolling, panning, and zooming with touch.
Examples - Game development
hyper vanguard force a neat vertically scrolling space shooter.
... nutmeg cute retro scrolling platforming action.
... biolab disaster side-scrolling platform shooter.
... x-type vertically scrolling space shooter demo.
EventTarget.addEventListener() - Web APIs
see improving scrolling performance with passive listeners to learn more.
...all attach to same element // case 3 for(let i=0, j=0 ; i<els.length ; i++){ /* do lots of stuff with j */ els[j].addeventlistener("click", processevent = function(e){/*do something*/}, false); } // case 4 for(let i=0, j=0 ; i<els.length ; i++){ /* do lots of stuff with j */ function processevent(e){/*do something*/}; els[j].addeventlistener("click", processevent, false); } improving scrolling performance with passive listeners according to the specification, the default value for the passive option is always false.
... however, this introduces the potential for event listeners handling certain touch events (among others) to block the browser's main thread while it is attempting to handle scrolling, resulting in possibly enormous reduction in performance during scroll handling.
...this prevents the event listener from being called, so it can't block page rendering while the user is scrolling.
Intersection Observer API - Web APIs
implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
... consider a web page that uses infinite scrolling.
... to get a feeling for how thresholds work, try scrolling the box below around.
...late.queryselector(".samplebox").id = boxid; wrapper.appendchild(document.importnode(template, true)); // set up the observer for this box observeroptions.threshold = thresholdsets[i]; observers[i] = new intersectionobserver(intersectioncallback, observeroptions); observers[i].observe(document.queryselector("#" + boxid)); } // scroll to the starting position document.scrollingelement.scrolltop = wrapper.firstelementchild.getboundingclientrect().top + window.scrolly; document.scrollingelement.scrollleft = 750; } intersectioncallback = (entries) => { entries.foreach((entry) => { let box = entry.target; let visiblepct = (math.floor(entry.intersectionratio * 100)) + "%"; box.queryselector(".topleft").innerhtml = visiblepct; box.queryselector(".toprigh...
ScrollToOptions.behavior - Web APIs
the behavior property of the scrolltooptions dictionary specifies whether the scrolling should animate smoothly, or happen instantly in a single jump.
... syntax behavior: scrollbehavior value an enum, the value of which can be one of the following: smooth: the scrolling animates smoothly.
... auto: the scrolling happens in a single jump.
...the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not.
Window.pageYOffset - Web APIs
<iframe id="frame"> </iframe> <div id="info"> </div> javascript var frame = document.getelementbyid("frame"); var framedoc = frame.contentdocument; var info = document.getelementbyid("info"); var target = framedoc.getelementbyid("overview"); framedoc.scrollingelement.scrolltop = target.offsettop; info.innertext = "y offset after scrolling: " + frame.contentwindow.pageyoffset + " pixels"; the javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll output the result of our scroll position check.
... with the target element in hand, we set the scrolltop of the frame's scrollingelement to the offsettop of the target element.
... by doing so, we set the vertical scrolling position of the frame's document so that it's the same as the top edge of the target element.
... this will automatically set the scrolling position to the maximum possible value if the attempted scroll would exceed the maximum.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
event_system_menupopupstart [important] event_system_menupopupend [important] event_system_capturestart event_system_captureend event_system_movesizestart event_system_movesizeend event_system_contexthelpstart event_system_contexthelpend event_system_dragdropstart event_system_dragdropend event_system_dialogstart event_system_dialogend event_system_scrollingstart event_system_scrollingend [possibly important, talk to at vendor] event_system_switchstart event_system_switchend event_system_minimizestart event_system_minimizeend event_object_create [don't implement, watching system generated versions of this event causes assistive technology crashes] event_object_destroy [don't implement, watching system generated versions of ...
... no way for assistive technology to know when scrolling has stopped.
... fire the event_system_scrollingend event to indicate when scrolling has ended (try not to fire too many of these, wait until scrolling has truly stopped).
... there is no need to support event_system_scrollingstart, it is not used by assistive technology.
Coordinate systems - CSS: Cascading Style Sheets
scrolling is not a factor.
...the top-left corner of the window is always (0, 0), regardless of the content of the document or any scrolling that may have been done.
... in other words, scrolling the document will change the client coordinates of a given position within the document.
...note also the effect of scrolling the example horizontally upon the values returned and how the value of clientx doesn't change.
Guide to scroll anchoring - CSS: Cascading Style Sheets
in most cases anchored scrolling is exactly what you want — content jumping is a poor experience for anyone.
... if your page is not behaving well with scroll anchoring enabled, it is probably because some scroll event listener is not handling well the extra scrolling to compensate for the anchor node movement.
... these suppression triggers are changes to the computed value of any of the following properties: top, left, right, or bottom margin or padding any width or height-related properties transform additionally, position changes anywhere inside the scrolling box also disable scroll anchoring.
... in bug 1584285 the layout.css.scroll-anchoring.suppressions.enabled flag was added to firefox nightly in order to allow the disabling of these triggers further reading explainer document on the wicg site scroll anchoring for web developers on the chromium blog implement a pin-to-bottom scrolling element using scroll anchoring ...
overscroll-behavior-block - CSS: Cascading Style Sheets
the overscroll-behavior-block css property sets the browser's behavior when the block direction boundary of a scrolling area is reached.
..."bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
... none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing block overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-inline - CSS: Cascading Style Sheets
the overscroll-behavior-inline css property sets the browser's behavior when the inline direction boundary of a scrolling area is reached.
..."bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
... none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing inline overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-x - CSS: Cascading Style Sheets
the overscroll-behavior-x css property sets the browser's behavior when the horizontal boundary of a scrolling area is reached.
..."bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
... none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling horizontally in our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other.
overscroll-behavior-y - CSS: Cascading Style Sheets
the overscroll-behavior-y css property sets the browser's behavior when the vertical boundary of a scrolling area is reached.
..."bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g.
... none no scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling vertically .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a full example and explanation.
scroll-behavior - CSS: Cascading Style Sheets
the scroll-behavior css property sets the behavior for a scrolling box when scrolling is triggered by the navigation or cssom scrolling apis.
... values auto the scrolling box scrolls instantly.
... smooth the scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time.
... formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> css a { display: inline-block; width: 50px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center; } nav { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: ...
scroll-margin - CSS: Cascading Style Sheets
description you can see the effect of scroll-margin by scrolling to a point partway between two of the "pages" of the example's content.
... the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.
...250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin: 1rem; } .scroller > div:nth-child(3) { scroll-margin: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the left edge of the second <div>, and 2rems outside the left edge of the third <div>.
XUL accessibility guidelines - Archive of obsolete content
scrolling ensure that scrolling is keyboard accessible.
... scrolling all scrollable elements are controllable with the keyboard.
... scrolling cannot be performed with a keyboard.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
the performance mantra of rail is "focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." there are 4 stages of interaction: page load, idle, response to input, and scrolling and animation.
... 427 snap positions glossary, snap positions a scroll container may set snap positions — points that the scrollport will stop moving at after a scrolling operation is completed.
... this allows a scrolling experience that gives the effect of paging through content rather than needing to drag content into view.
mozbrowserscrollviewchange
the mozbrowserscrollviewchange event is fired when asynchronous scrolling (i.e.
... details the details property returns an anonymous javascript object with the following properties: state a domstring representing the current state of scrolling in the viewport — available values are started and stopped.
... example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mozbrowserloadstart mozbrowserlocationchange mozbrowsersecuritychange mozbrowsertitlechange mozbrowserusernameandpasswordrequired ...
nsIAccessibleEvent
event_scrolling_start 0x0026 0x0023 scrolling has started on a scroll bar.
... event_scrolling_end 0x0027 0x0024 scrolling has ended on a scroll bar.
...5 event_menupopupstart 0x0006 event_menupopupend 0x0007 event_capturestart 0x0008 event_captureend 0x0009 event_movesizestart 0x000a event_movesizeend 0x000b event_contexthelpstart 0x000c event_contexthelpend 0x000d event_dragdropstart 0x000e event_dragdropend 0x000f event_dialogstart 0x0010 event_dialogend 0x0011 event_scrollingstart 0x0012 event_scrollingend 0x0013 event_minimizestart 0x0016 event_minimizeend 0x0017 event_atk_property_change 0x0100 event_atk_selection_change 0x0101 event_atk_text_change 0x0102 event_atk_text_selection_change 0x0103 event_atk_text_caret_move 0x0104 event_atk_visible_data_change 0x0105 event_atk_table_model_change 0x0110 ev...
Element: DOMMouseScroll event - Web APIs
detail the detail property describes the scroll more precisely, with positive values indicating scrolling downward and negative values indicating scrolling upward.
... if the event represents scrolling up by a page, the value of detail is -32768.
... if the event indictes scrolling down by a page, the value is +32768.
Element.getBoundingClientRect() - Web APIs
the amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle.
... this means that the rectangle's boundary edges (top, right, bottom, left) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute).
... if you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollx and window.scrolly) to get a bounding rectangle which is independent from the current scrolling position.
Pointer events - Web APIs
this can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (for example by scrolling).
...the values pan-x and pan-y, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively.
... the value manipulation means the browser may consider touches that begin on the element are only for scrolling and zooming.
ScrollToOptions - Web APIs
the scrolltooptions dictionary of the cssom view spec contains properties specifying where an element should be scrolled to, and whether the scrolling should be smooth.
... scrolltooptions.behavior specifies whether the scrolling should animate smoothly, or happen instantly in a single jump.
...the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not.
UIEvent.layerX - Web APIs
WebAPIUIEventlayerX
this property takes scrolling of the page into account and returns a value relative to the whole of the document unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> <span>make the page scroll more!
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.layerY - Web APIs
WebAPIUIEventlayerY
this property takes scrolling of the page into account, and returns a value relative to the whole of the document, unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> <span>make the page scroll more!
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.pageY - Web APIs
WebAPIUIEventpageY
this property takes into account any vertical scrolling of the page.
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> <span>make the page scroll more!
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
ARIA: feed role - Accessibility
a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.
...</section> description a feed is a page structure for a scrollable list of articles where scrolling may cause articles to be added to the top or end of the list.
... the feed pattern enables reliable assistive technology reading mode interaction by establishing the following interoperability agreement between the web page and assistive technologies: in the context of a feed, the web page code is responsible for: appropriate visual scrolling of the content based on which article contains dom focus.
Cognitive accessibility - Accessibility
moving, blinking, scrolling it is important not to distract users, especially ones with cognitive disabilities.
... if moving, blinking, scrolling, or auto-updating information starts automatically, lasts more than five seconds, and is presented in parallel with other content, the user must able to pause, stop, hide or control it, unless it's an essential functionality.
... "essential" means that removing the moving, blinking, scrolling, or auto-updating information would fundamentally change the meaning of the content and/or functionality, and information and functionality cannot be achieved in another way that would conform.
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
the difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
...disables scrolling of xml root elements, <html>, and <body> with the keyboard's arrow keys and the mouse wheel.
...this is necessary for technical reasons — if a float intersected with the scrolling element it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.
scroll-margin-inline-end - CSS: Cascading Style Sheets
the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block.
...250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-end: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline-end: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline end edge of the second <div>, and 2rems outside the inline end edge of the third <div>.
scroll-margin-inline-start - CSS: Cascading Style Sheets
the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.
...250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... last of all we specify the scroll margin-values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline-start: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline-start: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline start edge of the second <div>, and 2rems outside the inline start edge of the third <div>.
scroll-margin-inline - CSS: Cascading Style Sheets
the aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block.
...250px; height: 250px; overflow-x: scroll; display: flex; box-sizing: border-box; border: 1px solid #000; scroll-snap-type: x mandatory; } the main parts relevant to the scroll snapping are overflow-x: scroll, which makes sure the contents will scroll and not be hidden, and scroll-snap-type: x mandatory, which dictates that scroll snapping must occur along the horizontal axis, and the scrolling will always come to rest on a snap point.
... last of all we specify the scroll margin values, a different one for the second and third child elements: .scroller > div:nth-child(2) { scroll-margin-inline: 1rem; } .scroller > div:nth-child(3) { scroll-margin-inline: 2rem; } this means that when scrolling past the middle child elements, the scrolling will snap to 1rem outside the inline end edge of the second <div>, and 2rems outside the inline end edge of the third <div>.
HTML attribute: multiple - HTML: Hypertext Markup Language
most browsers displaying a scrolling list box for a <select> control with the multiple attribute set versus a single line dropdown when the attribute is ommitted.
... <select multiple name="drawfs" id="drawfs"> <option>grumpy</option> <option>happy</option> <option>sleepy</option> <option>bashful</option> <option>sneezy</option> <option>dopey</option> <option>doc</option> </select> when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
...the control generally has a different appearance based on the presence of the multiple attribute, with most browsers displaying a scrolling list box instead of a single line dropdown when the attribute is present.
Populating the page: how browsers work - Web Performance
for smooth interactions, the developer's goal is to ensure performant site interactions, from smooth scrolling to being responsive to touch.
... to ensure smooth scrolling and animation, everything occupying the main thread, including calculating styles, along with reflow and paint, must take the browser less than 16.67ms to accomplish.
...if the load includes javascript, that was correctly deferred, and only executed after the onload event fires, the main thread might be busy, and not available for scrolling, touch, and other interactions.
Source code directories overview - Archive of obsolete content
scrolling view).
...for example, a scrolling view will find out the scroll bar positions and tell its content where to draw according the scroll bar thumbs.
smoothscroll - Archive of obsolete content
« xul reference home smoothscroll type: boolean true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it.
... currently, smooth scrolling supports horizontal arrowscrollboxes only.
smoothScroll - Archive of obsolete content
« xul reference smoothscroll type: boolean can be set to enable or disable smooth scrolling for the corresponding arrowscrollbox.
...currently, smooth scrolling supports horizontal arrowscrollboxes only.
Tree Box Objects - Archive of obsolete content
note: it is not necessary to run tree.boxobject.queryinterface(components.interfaces.nsitreeboxobject) as shown in the code examples on this page because: let boxobject = tree.treeboxobject; note: is equivalent to: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); scrolling the tree you can also scroll the tree using four different methods, similar to those available for listboxes.
...in the scrolling example above, getpagelength() would return four.
listbox - Archive of obsolete content
if the item is already visible, no scrolling occurs.
...if the item is already visible, no scrolling occurs.
richlistbox - Archive of obsolete content
if the item is already visible, no scrolling occurs.
...if the item is already visible, no scrolling occurs.
CSS - Archive of obsolete content
ArchiveWebCSS
the extension is implemented in microsoft edge and internet explorer 11.-ms-overflow-stylethe -ms-overflow-style css property is a microsoft extension controlling the behavior of scrollbars when the content of an element overflows.-ms-scroll-chainingthe -ms-scroll-chaining css property is a microsoft extension that specifies the scrolling behavior that occurs when a user hits the scroll limit during a manipulation.-ms-scroll-limitthe -ms-scroll-limit css property is a microsoft extension that specifies values for the -ms-scroll-limit-x-min, -ms-scroll-limit-y-min, -ms-scroll-limit-x-max, and -ms-scroll-limit-y-max properties.-ms-scroll-limit-x-maxthe -ms-scroll-limit-x-max css property is a microsoft extension that specifies the m...
...ll-limit-y-maxthe -ms-scroll-limit-y-max css property is a microsoft extension that specifies the maximum value for the element.scrolltop property.-ms-scroll-limit-y-minthe -ms-scroll-limit-y-min css property is a microsoft extension that specifies the minimum value for the element.scrolltop property.-ms-scroll-railsthe -ms-scroll-rails css property is a microsoft extension that specifies whether scrolling locks to the primary axis of motion.-ms-scroll-snap-points-xthe -ms-scroll-snap-points-x css property is a microsoft extension that specifies where snap-points will be located along the x-axis.-ms-scroll-snap-points-ythe -ms-scroll-snap-points-y css property is a microsoft extension that specifies where snap-points will be located along the y-axis.-ms-scroll-snap-xthe -ms-scroll-snap-x css shorth...
Snap positions - MDN Web Docs Glossary: Definitions of Web-related terms
a scroll container may set snap positions — points that the scrollport will stop moving at after a scrolling operation is completed.
... this allows a scrolling experience that gives the effect of paging through content rather than needing to drag content into view.
Positioning - Learn web development
ut id ornare felis, eget fermentum sapien.</p> body { width: 500px; margin: 0 auto; } .positioned { background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; border-radius: 5px; } .positioned { position: sticky; top: 30px; left: 30px; } an interesting and common use of position: sticky is to create a scrolling index page where different headings stick to the top of the page as they reach it.
... <dd>bee</dd> <dd>banana</dd> <dd>beanstalk</dd> <dt>c</dt> <dd>calculator</dd> <dd>cane</dd> <dd>camera</dd> <dd>camel</dd> <dt>d</dt> <dd>duck</dd> <dd>dime</dd> <dd>dipstick</dd> <dd>drone</dd> <dt>e</dt> <dd>egg</dd> <dd>elephant</dd> <dd>egret</dd> </dl> sticky elements are "sticky" relative to the nearest ancestor with a "scrolling mechanism", which is determined by its ascendants' position property.
Index - Learn web development
every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that javascript is probably involved.
...are scrolling and animations smooth?
What is web performance? - Learn web development
are scrolling and animations smooth?
...is the scrolling smooth?
Browser API
mozbrowserscrollareachanged sent when the available scrolling area in the browser <iframe> changes.
... this can occur on resize and when the page size changes (while loading for example.) mozbrowserscrollviewchange sent when asynchronous scrolling (i.e.
nsITreeBoxObject
prevents scrolling off the end of the tree.
...this method prevents scrolling off the end of the tree.
Paint Flashing Tool - Firefox Developer Tools
the paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling.
...after moving the mouse around and scrolling a bit, the above page looks like this: in this example, there are two main sources of repaints: moving the mouse over links makes the browser repaint them, because they have a style applied using the :hover pseudo-class scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right to deactivate paint flash...
Document: wheel event - Web APIs
even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction.
... therefore, do not rely on the wheel event's delta* properties to get the scrolling direction.
Element: mousewheel event - Web APIs
bubbles yes cancelable yes interface mousewheelevent event handler property onmousewheel the detail property the value of the detail property is always zero, except in opera, which uses detail similarly to the firefox-only dommousescroll event's detail value, which indicates the scroll distance in terms of lines, with negative values indicating the scrolling movement is either toward the bottom or toward the right, and positive values indicating scrolling to the top or left.
...when a user operates the device for scrolling to right, the value is negative.
Element: wheel event - Web APIs
even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction.
... therefore, do not rely on the wheel event's delta* properties to get the scrolling direction.
GlobalEventHandlers.onscroll - Web APIs
onwheel handles general wheel rotation, while onscroll handles scrolling of an object's content.
... example this example monitors scrolling on a <textarea>, and logs the element's vertical scroll position accordingly.
HTMLIFrameElement - Web APIs
htmliframeelement.scrolling is a domstring that indicates whether the browser should provide scrollbars for the frame.
... recommendation the following properties are now obsolete: scrolling, marginwidth, marginheight, longdesc, frameborder, and align.
HTMLElement.focus() - Web APIs
if preventscroll is set to true, no scrolling will occur.
...d("mybutton").focus(); } html <button type="button" id="mybutton">click me!</button> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { document.getelementbyid("mybutton").focus({preventscroll:true}); } html <button type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="focusnoscrollmethod()">click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" s...
MouseEvent.pageX - Web APIs
WebAPIMouseEventpageX
being based on the edge of the document as it is, this property takes into account any horizontal scrolling of the page.
... syntax var pagex = mouseevent.pagex; value a floating-point number of pixels from the left edge of the document at which the mouse was clicked, regardless of any scrolling or viewport positioning that may be in effect.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
in single-screen 2d games, the camera is not associated directly with the player or any other character in the game, but is instead either fixed above or next to the game play area, or follows the action as the action moves around a scrolling game world.
... in a side-scrolling or top-scrolling game such as super mario bros., the camera moves along left and right (or up and down, or both) to ensure that the action remains visible even though the game level is much larger than the viewport.
WheelEvent - Web APIs
even when it does, that doesn't mean that the delta* values in the wheel event necessarily reflect the content's scrolling direction.
... therefore, do not rely on delta* properties to get the content's scrolling direction.
Window.scroll() - Web APIs
WebAPIWindowscroll
for relative scrolling, see window.scrollby(), window.scrollbylines(), and window.scrollbypages().
... for scrolling elements, see element.scrolltop and element.scrollleft.
Window.scrollTo() - Web APIs
WebAPIWindowscrollTo
for relative scrolling, see window.scrollby(), window.scrollbylines(), and window.scrollbypages().
... for scrolling elements, see element.scrolltop and element.scrollleft.
ARIA: grid role - Accessibility
page down moves focus down an author-determined number of rows, typically scrolling so the bottom row in the currently visible set of rows becomes one of the first visible rows.
... page up moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows.
overflow-block - CSS: Cascading Style Sheets
scroll content that overflows the block axis can be seen by scrolling to it.
... optional-paged content that overflows the block axis can be seen by scrolling to it, but page breaks can be manually triggered (such as via break-inside, etc.) to cause the following content to display on the following page.
Flow Layout and Overflow - CSS: Cascading Style Sheets
comparing the next example with the example for overflow: scroll you should see overflow scroll has horizontal and vertical scrollbars when it only needs vertical scrolling.
...this will act like overflow: hidden however it does not allow for programmatic scrolling, the box becomes non-scrollable.
Visual formatting model - CSS: Cascading Style Sheets
we most often see this as scrolling in the block dimension — vertically in a horizontal, top-to-bottom language.
... however, you might design something that requires scrolling in the inline dimension too.
background-attachment - CSS: Cascading Style Sheets
even if an element has a scrolling mechanism, the background doesn't move with the element.
...if the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.
scrollbar-color - CSS: Cascading Style Sheets
the track refers to the background of the scrollbar, which is generally fixed regardless of the scrolling position.
... formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typea color formal syntax auto | dark | light | <color>{2}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
Event reference
mozbrowserscrollareachanged firefox os browser api-specific sent when the available scrolling area in the browser <iframe> changes.
... this can occur on resize and when the page size changes (while loading for example.) mozbrowserscrollviewchange firefox os browser api-specific sent when asynchronous scrolling (i.e.
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
when multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
... size if the control is presented as a scrolling list box (e.g.
Performance fundamentals - Web Performance
the html/css layout and graphics code in gecko reduces invalidation and repainting for common cases like scrolling; developers get this support "for free".
...but often trading some generality and quality for speed, such as using a static rendering instead of a css radial gradient, can push scrolling framerate over a target.
Web Performance
web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions - is the scrolling smooth?
...these perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations.
panel - Archive of obsolete content
scrolling using keyboard doesn't work properly (bug 1001914) globals constructors panel(options) creates a panel.
Fast Graphics Performance With HTML - Archive of obsolete content
make content that has scrolling content underneath it opaque e.g.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
nsdocshell::internalload() handles targeting to the correct docshell (if the load has a target window associated with it), scrolling to anchors (if the load is an anchor within the current page), and session history issues.
userAction - Archive of obsolete content
scrolling the user is scrolling through the textbox.
Attribute (XUL) - Archive of obsolete content
eafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...
XUL Events - Archive of obsolete content
the underflow event can be used to indicate that a scrolling mechanism is no longer necessary.
ensureElementIsVisible - Archive of obsolete content
if the item is already visible, no scrolling occurs.
ensureIndexIsVisible - Archive of obsolete content
if the item is already visible, no scrolling occurs.
ensureSelectedElementIsVisible - Archive of obsolete content
if the item is already visible, no scrolling occurs.
scrollIncrement - Archive of obsolete content
« xul reference scrollincrement type: integer a read only property that lets you retrieve the number of pixels by which scrolling will occur when the arrowscrollbox is clicked.
treeBoxObject - Archive of obsolete content
this object implements the nsitreeboxobject interface and contains functions for retrieving the cells at certain coordinates, redrawing cells and scrolling the tree.
Property - Archive of obsolete content
electedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbrowserefind webnavigation webprogress width wizardpages wraparound year yearleadingzero related dom element properties dom:element.attributes dom:element.baseuri dom:element.childele...
Things I've tried to do with XUL - Archive of obsolete content
this is assuming no scrolling is going on.
Manipulating Lists - Archive of obsolete content
list scrolling if there are more rows in the listbox than can be displayed, a scroll bar will appear to allow the user to scroll the list.
Popup Menus - Archive of obsolete content
our find files example so far : source view next, we'll look at how to create scrolling menus.
XUL Tutorial - Archive of obsolete content
c controls list controls progress meters adding html elements using spacers more button features the box model the box model element positioning box model details groupboxes adding more elements more layout elements stacks and decks stack positioning tabboxes grids content panels splitters toolbars and menus toolbars simple menu bars more menu features popup menus scrolling menus events and scripts adding event handlers more event handlers keyboard shortcuts focus and selection commands updating commands broadcasters and observers document object model document object model modifying a xul interface manipulating lists box objects xpcom interfaces xpcom examples trees trees more tree features tree selection custom tree views tree view de...
XUL Questions and Answers - Archive of obsolete content
how can i manage scrolling outside the browser?
rows - Archive of obsolete content
ArchiveMozillaXULrows
however, nesting rows elements allows groups of rows to have a separate appearance such as a different border, or separate scrolling may be defined for these rows.
scrollbox - Archive of obsolete content
scrolling a child element into view see element.scrollintoview.
tree - Archive of obsolete content
ArchiveMozillaXULtree
this object implements the nsitreeboxobject interface and contains functions for retrieving the cells at certain coordinates, redrawing cells and scrolling the tree.
-ms-overflow-style - Archive of obsolete content
auto-hiding scrollbars are displayed during scrolling or shortly after the pointer interacts with the page, and are hidden shortly after scrolling and pointer interaction stops.
-ms-scroll-rails - Archive of obsolete content
the -ms-scroll-rails css property is a microsoft extension that specifies whether scrolling locks to the primary axis of motion.
Index - Game development
this set of articles covers the basics of creating tile maps using javascript and canvas (although the same high level techniques could be used in any programming language.) 36 square tilemaps implementation: scrolling maps canvas, games, javascript, atlas, scrolling, spritesheet, tilemap, tiles this article covers how to implement scrolling square tilemaps using the canvas api.
First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
scrolling and zooming are not included in this metric.
RAIL - MDN Web Docs Glossary: Definitions of Web-related terms
the performance mantra of rail is "focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." there are 4 stages of interaction: page load, idle, response to input, and scrolling and animation.
HTML table advanced features and accessibility - Learn web development
to give you some interesting examples, in the case of a long table you could make the table header and footer repeat on every printed page, and you could make the table body display on a single page and have the contents available by scrolling up and down.
What is JavaScript? - Learn web development
a high-level definition javascript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, etc.
JavaScript — Dynamic client-side scripting - Learn web development
every time a web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that javascript is probably involved.
Web performance resources - Learn web development
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling.
Web performance - Learn web development
these perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations.
Handling common accessibility problems - Learn web development
when you are scrolling through headings, lists, etc., items you are selected on will generally be highlighted with a subtle outline, but this is not always the case for all things.
Accessibility API cross-reference
in aria, used to nest browsable rich text content inside interactive content document n/a n/a document document a drop down list, different from combobox droplist n/a n/a listbox for math & chemistry equation n/a n/a math a scrollable list of articles where scrolling may cause articles to be added to or removed from either end of the list.
Mozilla accessibility architecture
checkboxstatechange, radiostatechange mozilla dom event_state_change popupshowing mozilla dom event_menustart popuphiding mozilla dom event_menuend nsdocaccessible::scrollpositiondidchange(), then nsdocaccessible::scrolltimercallback() nsiscrollpositonlistener and nsitimer callbacks event_scrollingend (quick timer is used to determine when scrolling pauses or stops, to avoid extra events being fired) nsdocaccessible::onstatechange(), :nsdocaccessible:onlocationchange() nsiwebprogresslistener callback event_state_change (msaa) event_reorder (atk) dom mutation events - multiple uses dom mutation events are a great thing.
Mozilla’s UAAG evaluation report
(p1) vg uses title bar color and focus indicator to indicate with view port has focus the currently focused content frame has a dotted outline, until a key is pressed or scrolling occurs the focus appearance is not configurable 10.8 indicate rendering progress.
Experimental features in Firefox
nightly 75 no developer edition 75 no beta 75 no release 75 no preference name devtools.webconsole.input.context mobile gesture support in responsive design mode mouse gestures are used to simulate mobile gestures like swiping/scrolling, double-tap and pinch-zooming and long-press to select/open the context menu.
mozbrowserscrollareachanged
the mozbrowserscrollareachanged event is fired when the available scrolling area in the browser <iframe> changes.
IME handling guide
for example, pressing the space key to attempt scrolling a page may be consumed and prevented by ime.
source-editor.jsm
aalign optional how to position the line with respect to the viewport when scrolling the line into view.
Mozilla Quirks Mode Behavior
obsolete the scrolling attribute on frame is handled differently.
Reporting a Performance Problem
scrolling on gmail.com).
Gecko events
thelp_end a window has exited context-sensitive help mode is supported: no event_dragdrop_start an application is about to enter drag-and-drop mode is supported: yes event_dragdrop_end an application is about to exit drag-and-drop mode is supported: no event_dialog_start a dialog box has been displayed is supported: no event_dialog_end a dialog box has been closed is supported: no event_scrolling_start scrolling has started on a scroll bar is supported: yes event_scrolling_end scrolling has ended on a scroll bar is supported: yes event_minimize_start a window object is about to be minimized or maximized is supported: no event_minimize_end a window object has been minimized or maximized is supported: no event_document_load_start is supported: yes event_document_load_complete t...
Gecko states
state_floating children "owned" not "contained" by parent state_checkable indicates scrolling or moving text or graphics.
nsIAccessibleScrollType
accessible/public/nsiaccessibletypes.idlscriptable these constants control the scrolling of an object or substring into a window.
nsIAccessibleStates
state_marqueed 0x00002000 the object is scrolling or moving text or graphics.
nsIDOMWindowUtils
this means that the pixels rendered to the displayport take scrolling into account, for example.
nsISHEntry
pageidentifier unsigned long an integer that should be the same for two entries attached to the same docshell only if the two entries are entries for the same page in the sense that one could go from the state represented by one to the state represented by the other simply by scrolling (so the entries are separated by an anchor traversal or a subframe navigation in some other frame).
Index - Firefox Developer Tools
81 paint flashing tool web performance the paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling.
Frame rate - Firefox Developer Tools
similarly, if scrolling through a page involves a lot of complex page updates and the browser can't keep up an acceptable frame rate, scrolling the page will appear sluggish or will occasionally freeze.
Animation() - Web APIs
currently the only timeline type available is documenttimeline, but in the future there my be timelines associated with gestures or scrolling, for example.
CanvasRenderingContext2D.drawWindow() - Web APIs
the contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
CanvasRenderingContext2D - Web APIs
the contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.
Document: pointercancel event - Web APIs
the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
Document: scroll event - Web APIs
bubbles yes cancelable no interface event event handler property onscroll note: in ios uiwebviews, scroll events are not fired while scrolling is taking place; they are only fired after the scrolling has completed.
Document - Web APIs
WebAPIDocument
document.scrollingelementread only returns a reference to the element that scrolls the document.
Element: MSInertiaStart event - Web APIs
the msinertiastart event is fired when contact with the touch surface stops when a scroll has enough inertia to continue scrolling.
Element: MozMousePixelScroll event - Web APIs
bubbles yes cancelable yes interface mousescrollevent getting the distance scrolled the event's detail property indicates the scroll distance in terms of lines, with negative values indicating the scrolling movement is either toward the bottom or toward the right, and positive values indicating scrolling to the top or left.
Element.getClientRects() - Web APIs
the amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the rectangles.
Element.msZoomTo() - Web APIs
WebAPIElementmsZoomTo
this method has no scrolling effect on non-scrollable elements and no zooming effect on non-zoomable elements (e.g., elements with "-ms-content-zooming: none").
Element.scrollIntoViewIfNeeded() - Web APIs
if the element is already within the visible area of the browser window, then no scrolling takes place.
Element: scroll event - Web APIs
bubbles no cancelable no interface event event handler property onscroll note: in ios uiwebviews, scroll events are not fired while scrolling is taking place; they are only fired after the scrolling has completed.
Element.setPointerCapture() - Web APIs
this can be used to ensure that an element continues to receive pointer events even if the pointer device's contact moves off the element (such as by scrolling or panning).
Event.cancelable - Web APIs
WebAPIEventcancelable
canceling the click, scroll, or beforeunload events would prevent the user from clicking on something, scrolling the page, or navigating away from the page, respectively.
Using the Frame Timing API - Web APIs
a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc.
Frame Timing API - Web APIs
a frame represents the amount of work a browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc.
GlobalEventHandlers.onwheel - Web APIs
note: don't confuse onwheel with onscroll: onwheel handles general wheel rotation, while onscroll handles scrolling of an object's content.
HTMLElement: pointercancel event - Web APIs
the pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
HTMLImageElement.loading - Web APIs
for instance, if the user is scrolling through the document, a value of lazy will cause the image to only be loaded shortly before it will appear in the window's visual viewport.
HTMLOutputElement - Web APIs
when the problem is reported, the user agent may focus the element and change the scrolling position of the document or perform some other action that brings the element to the user's attention.
Timing element visibility with the Intersection Observer API - Web APIs
try experimenting with scrolling around and watch how visibility changes affect the timers in each ad.
Key Values - Web APIs
toggles between scrolling and cursor movement modes.
Long Tasks API - Web APIs
janky animations and scrolling.
MediaTrackConstraints.logicalSurface - Web APIs
this is used to specify whether or not getdisplaymedia() should allow the user to choose display surfaces which are not necessarily fully visible on the screen, such as occluded windows or the complete content of windows which are large enough to require scrolling to see their entire contents.
MediaTrackSettings.logicalSurface - Web APIs
logical surfaces are those which are not necessarily entirely onscreen, or may even be off-screen, such as windows' backing buffers (where only part of the buffer is visible without scrolling the containing window) and offscreen rendering contexts.
MouseEvent.pageY - Web APIs
WebAPIMouseEventpageY
this property takes into account any vertical scrolling of the page.
PerformanceFrameTiming - Web APIs
a frame represents the amount of work a browser does in one event loop such as processing dom events, resizing, scrolling, rendering, css animations, etc..
ScrollToOptions.left - Web APIs
the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not.
ScrollToOptions.top - Web APIs
the positions to scroll to along the x and y axes), and a checkbox indicating whether they want smooth scrolling enabled or not.
TouchEvent - Web APIs
the change to treat listeners as passive by default prevents the listener from blocking page rendering while a user is scrolling.
UIEvent.pageX - Web APIs
WebAPIUIEventpageX
this value is relative to the left edge of the entire document, regardless of the current horizontal scrolling offset of the document.
VisualViewport - Web APIs
,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can result in the fixed element flickering during scrolling.
WebGL best practices - Web APIs
in production code, avoid such entry points, especially on the browser main thread where they can cause the entire page to jank (often including scrolling or even the whole browser).
Web Video Text Tracks Format (WebVTT) - Web APIs
vttregion the methods used for region are listed below along with description of their functionality: scrollsetting: for adjusting the scrolling setting of all nodes present in given region.
Using the log role - Accessibility
with an area that has scrolling text, such as a stock ticker, the marquee role should be used instead.
ARIA: Region role - Accessibility
scrolling content areas with overflow text if there is a content area with tabindex="0", add role="region" to convey to screen reader users that is a generic region.
ARIA: button role - Accessibility
button:focus, [role="button"][aria-pressed="true"] { border: 2px solid #000; } javascript function handlebtnclick(event) { togglebutton(event.target); } function handlebtnkeydown(event) { // check to see if space or enter were pressed if (event.key === " " || event.key === "enter" || event.key === "spacebar") { // "spacebar" for ie11 support // prevent the default action to stop scrolling when space is pressed event.preventdefault(); togglebutton(event.target); } } function togglebutton(element) { var audio = document.getelementbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pressed", !pressed); // toggle the play s...
WAI-ARIA Roles - Accessibility
a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.aria: figure rolethe aria figure role can be used to identify a figure inside page content where appropriate semantics do not already exist.
Accessibility documentation index - Accessibility
a feed enables screen readers to use the browse mode reading cursor to both read and scroll through a stream of rich content that may continue scrolling infinitely by loading more content as the user reads.
Keyboard-navigable JavaScript widgets - Accessibility
prevent used key events from performing browser functions if your widget handles a key event, prevent the browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code.
Operable - Accessibility
examples include scrolling text and videos.
Perceivable - Accessibility
1.4.10 reflow (aa) added in 2.1 no horizontal scrolling for left-to-right languages (like english) or right-to-left languages (like arabic) no vertical scrolling for top-to-bottom languages (like japanese) except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table) understanding reflow 1.4.11 non-text contrast(aa) added in 2.1 minimum color contrast ratio of 3...
::-webkit-scrollbar - CSS: Cascading Style Sheets
::-webkit-scrollbar-thumb — the draggable scrolling handle.
overflow-inline - CSS: Cascading Style Sheets
scroll content that overflows the inline axis can be seen by scrolling to it.
CSSOM View - CSS: Cascading Style Sheets
cssom view is a module of css that lets you manipulate the visual view of a document, in particular its scrolling behavior.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
if a user is scrolling through a long document on mobile, the priorities for that user quite often map to what should be a priority in the source.
CSS Overflow - CSS: Cascading Style Sheets
this is the content appearing outside of the box for which scrolling mechanisms need to be provided.
The stacking context - CSS: Cascading Style Sheets
element with a -webkit-overflow-scrolling value touch.
CSS Scroll Snap - CSS: Cascading Style Sheets
css scroll snap is a module of css that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.
WebKit CSS extensions - CSS: Cascading Style Sheets
-webkit-alt* -webkit-color-correction -webkit-flow-from -webkit-flow-into -webkit-grid-columns (see grid-column) -webkit-grid-rows (see grid-row) -webkit-hyphenate-charset -webkit-image-set (see image-set()) -webkit-mask-attachment -webkit-match-nearest-mail-blockquote-color -webkit-overflow-scrolling -webkit-region-break-after -webkit-region-break-before -webkit-region-break-inside -webkit-region-fragment -webkit-shape-inside -webkit-touch-callout (see touch-action) background-origin-x (unprefixed!) background-origin-y (unprefixed!) * still supported in the safari technology preview, but not in a generally released browser.
cursor - CSS: Cascading Style Sheets
WebCSScursor
resizing & scrolling all-scroll something can be scrolled in any direction (panned).
overflow-x - CSS: Cascading Style Sheets
the difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
overflow-y - CSS: Cascading Style Sheets
the difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
<frame> - HTML: Hypertext Markup Language
WebHTMLElementframe
scrolling this attribute defines the existence of a scrollbar.
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
WebHTMLElementiframe
scrolling indicates when the browser should provide a scrollbar for the frame: auto: only when the frame's content is larger than its dimensions.
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
<marquee> the html <marquee> element is used to insert a scrolling area of text.
tabindex - HTML: Hypertext Markup Language
check out this fiddle to understand the scrolling effects of tabindex.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
154 <marquee>: the marquee element (obsolete) element, html, obsolete, reference, web, marquee the html <marquee> element is used to insert a scrolling area of text.
CSS Houdini
composite scrolling and animation ...
Loops and iteration - JavaScript
example in the example below, the function contains a for statement that counts the number of selected options in a scrolling list (a <select> element that allows multiple selections).
Promise - JavaScript
to understand this, start by scrolling to the bottom of the code block, and examine the promise chain.
Critical rendering path - Web Performance
layout can become a bottleneck, leading to jank if required during scrolling or other animations.
Recommended Web Performance Timings: How long is too long? - Web Performance
animation goal for scrolling and other animations to look smooth and feel responsive, the content repaints should occur at 60 frames per second (60fps), which is once every 16.7ms.
Lazy loading - Web Performance
lazy loading can occur on different moments in the application, but it typically happens on some user interactions such as scrolling and navigation.
overflow - SVG: Scalable Vector Graphics
within svg content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip.