What is a scroll box?

This is a recommends products dialog
Top Suggestions
Starting at
View All >
Language
French
English
ไทย
German
繁體中文
Country
Hi
All
Sign In / Create Account
language Selector,${0} is Selected
Join & Shop in Lenovo Pro
Register at Education Store
Pro Tier Benefits
• Save up to an extra 5% on Think everyday pricing
• Purchase up to 10 systems per order (5 more than Lenovo.com)
• Spend $10K, advance to Plus Tier with increased benefits
Plus Tier Benefits
• Save up to an extra 6% on Think everyday pricing
• Purchase up to 25 systems per order (20 more than Lenovo.com)
• Spend $50K, advance for free to Elite Tier with increased benefits
• Take advantage of flexible payment options with TruScale Device as a Service. Learn More >
Elite Tier Benefits
• Save up to an extra 7% on Think everyday pricing
• Purchase up to 50 systems per order (45 more than Lenovo.com)
• Take advantage of flexible payment options with TruScale Device as a Service. Learn More >
Partner Benefits
• Access to Lenovo's full product portfolio
• Configure and Purchase at prices better than Lenovo.com
View All Details >
more to reach
PRO Plus
PRO Elite
Congratulations, you have reached Elite Status!
Pro for Business
Delete icon Remove icon Add icon Reload icon
TEMPORARILY UNAVAILABLE
DISCONTINUED
Temporary Unavailable
Cooming Soon!
. Additional units will be charged at the non-eCoupon price. Purchase additional now
We're sorry, the maximum quantity you are able to buy at this amazing eCoupon price is
Sign in or Create an Account to Save Your Cart!
Sign in or Create an Account to Join Rewards
View Cart
Your cart is empty! Don’t miss out on the latest products and savings — find your next favorite laptop, PC, or accessory today.
Remove
item(s) in cart
Some items in your cart are no longer available. Please visit cart for more details.
has been deleted
Please review your cart as items have changed.
of
Contains Add-ons
Subtotal
Proceed to checkout
Yes
No
Popular Searches
What are you looking for today ?
Quick Links
Recent Searches
Hamburger Menu
skip to main content
{"arrowColor":"","backgroundColor":"#e6f4fa","divideColor":"#DBDBDB","sideMsg":"","data":[{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Pagee5febe51-a42e-4041-8b3b-da5de5e1ad2d","language":{"fr_ca":"","en_ca":"%3Cp%3E%3Cstrong%3E%3C%2Fstrong%3E%3Cstrong%3E%3C%2Fstrong%3E%3C%2Fp%3E%3Cp%3E%3Cstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20nowrap%3B%22%3E%3C%2Fspan%3E%3C%2Fstrong%3E%3C%2Fp%3E%3Cp%3E%3Cstrong%3E%3C%2Fstrong%3E%3Cstrong%3E%3C%2Fstrong%3E%3Cstrong%3EBlack%20Friday%20in%20July!%20%3C%2Fstrong%3ESave%20up%20to%20%7BsavingPercent%7D%20on%20laptops%20%26amp%3B%20accessories!%20Plus%2C%20free%20shipping%20sitewide.%26nbsp%3B%3Ca%20href%3D%22%2Fd%2Fdeals%2Fdoorbusters%2F%3FIPromoID%3DLEN944203%22%20target%3D%22_self%22%3E%3Cstrong%3EShop%20Now%3C%2Fstrong%3E%3C%2Fa%3E%3C%2Fp%3E","en":"%3Cp%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fstrong%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fstrong%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fspan%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fstrong%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3EBlack%20Friday%20in%20July!%26nbsp%3B%3C%2Fstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3ESave%20up%20to%20%7BsavingPercent%7D%20on%20laptops%20%26amp%3B%20accessories!%20Plus%2C%20free%20shipping%20sitewide.%3C%2Fspan%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3B%3C%2Fspan%3E%3Ca%20href%3D%22https%3A%2F%2Fadmin.lenovo.com%2Fd%2Fdeals%2Fdoorbusters%2F%3FIPromoID%3DLEN944203%22%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Cstrong%3EShop%20Now%3C%2Fstrong%3E%3C%2Fa%3E%3Ca%20href%3D%22%2Fd%2Fdeals%2Fdoorbusters%2F%3FIPromoID%3DLEN944203%22%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Cstrong%3E%3C%2Fstrong%3E%3C%2Fa%3E%3Ca%20href%3D%22%2Fd%2Fdeals%2Flenovo-sale%2F%3FIPromoID%3DLEN944203%22%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Cstrong%3E%3C%2Fstrong%3E%3C%2Fa%3E%3Ca%20href%3D%22%2Fd%2Fdeals%2Fdoorbusters%2F%3FIPromoID%3DLEN944203%22%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Cstrong%3E%3C%2Fstrong%3E%3C%2Fa%3E%3Ca%20href%3D%22%2Fd%2Fdeals%2Fbusiness%2F%3FIPromoID%3DLEN944203%22%20target%3D%22_self%22%20textvalue%3D%22Shop%20Now%22%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Cstrong%3E%3C%2Fstrong%3E%3C%2Fa%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fspan%3E%3C%2Fp%3E","fr":""},"id":"Pagee5febe51-a42e-4041-8b3b-da5de5e1ad2d"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Page7b778271-8d5b-4b04-b722-f0345a7d6e87","language":{"fr_ca":"","en_ca":"%3Cp%3E%3Cstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fspan%3E%3C%2Fstrong%3E%3Cstrong%3EShopping%20for%20a%20business%3F%3C%2Fstrong%3E%20New%20Lenovo%20Pro%20members%20get%20%24100%20off%20first%20order%20of%20%241%2C000%2B%2C%20exclusive%20savings%20%26amp%3B%201%3A1%20tech%20support.%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3B%3Ca%20href%3D%22%2Fbusiness%2Fbenefits%2F%3FIPromoID%3DLEN818484%22%20target%3D%22_self%22%3E%3Cstrong%3ELearn%20More%20%26gt%3B%3C%2Fstrong%3E%3C%2Fa%3E%3C%2Fspan%3E%3C%2Fp%3E","en":"%3Cp%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3EShopping%20for%20a%20business%3F%3C%2Fstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3BNew%20Lenovo%20Pro%20members%20get%20%24100%20off%20first%20order%20of%20%241%2C000%2B%2C%20exclusive%20savings%20%26amp%3B%201%3A1%20tech%20support.%3C%2Fspan%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3B%3Ca%20href%3D%22%2Fbusiness%2Fbenefits%2F%3FIPromoID%3DLEN818484%22%20target%3D%22_self%22%20textvalue%3D%22Learn%20More%20%26gt%3B%22%3E%3Cstrong%3ELearn%20More%20%26gt%3B%3C%2Fstrong%3E%3C%2Fa%3E%3C%2Fspan%3E%3C%2Fp%3E","fr":""},"id":"Page7b778271-8d5b-4b04-b722-f0345a7d6e87"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Paged3e789af-cbd7-482e-914c-835364af1847","language":{"fr_ca":"","en_ca":"%3Cp%3E%3Cstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fspan%3E%3C%2Fstrong%3E%3Cstrong%3E%3C%2Fstrong%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3EMy%20Lenovo%20Rewards!%26nbsp%3B%3C%2Fstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3EEarn%203%25-9%25%20in%20rewards%20and%20get%20free%20expedited%20delivery%20on%20select%20products.%3C%2Fspan%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3B%3C%2Fspan%3E%3Ca%20href%3D%22%2Frewards%2F%3FIPromoID%3DLEN775755%22%20target%3D%22_self%22%3E%3Cstrong%3EJoin%20For%20Free%20%26gt%3B%3C%2Fstrong%3E%3C%2Fa%3E%3C%2Fp%3E","en":"%3Cp%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fstrong%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3C%2Fstrong%3E%3Cstrong%20style%3D%22text-wrap%3A%20wrap%3B%22%3EMy%20Lenovo%20Rewards!%26nbsp%3B%3C%2Fstrong%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3EEarn%203%25-9%25%20in%20rewards%20and%20get%20free%20expedited%20delivery%20on%20select%20products.%3C%2Fspan%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%26nbsp%3B%3C%2Fspan%3E%3Ca%20href%3D%22https%3A%2F%2Fadmin.lenovo.com%2Frewards%2F%3FIPromoID%3DLEN775755%22%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Cstrong%3EJoin%20For%20Free%20%26gt%3B%3C%2Fstrong%3E%3C%2Fa%3E%3Ca%20href%3D%22%2Frewards%2F%3FIPromoID%3DLEN775755%22%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Cstrong%3E%3C%2Fstrong%3E%3C%2Fa%3E%3C%2Fp%3E","fr":""},"id":"Paged3e789af-cbd7-482e-914c-835364af1847"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Pageb07f129d-3d87-4f1e-a79a-69d8248981b9","language":{"fr_ca":"","en_ca":"%3Cp%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3EBusiness%20Financing%20Available.%20Split%20payments%20from%204%20to%2052%20weeks%2C%20options%20as%20low%20as%200%25%20interest.%26nbsp%3B%3C%2Fspan%3E%3Ca%20href%3D%22%2Flandingpage%2Flenovo-financing-options%2F%3FIPromoID%3DLEN771093%22%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Cstrong%3ESee%20Details%20%26gt%3B%3C%2Fstrong%3E%3C%2Fa%3E%3C%2Fp%3E","en":"%3Cp%3E%3Cspan%20style%3D%22text-wrap%3A%20wrap%3B%22%3EBusiness%20Financing%20Available.%20Split%20payments%20from%204%20to%2052%20weeks%2C%20options%20as%20low%20as%200%25%20interest.%26nbsp%3B%3C%2Fspan%3E%3Ca%20href%3D%22%2Flandingpage%2Flenovo-financing-options%2F%3FIPromoID%3DLEN771093%22%20target%3D%22_self%22%20style%3D%22text-wrap%3A%20wrap%3B%22%3E%3Cstrong%3ESee%20Details%20%26gt%3B%3C%2Fstrong%3E%3C%2Fa%3E%3C%2Fp%3E","fr":""},"id":"Pageb07f129d-3d87-4f1e-a79a-69d8248981b9"},"gInfo":""},{"pcInfo":"","mAndTabInfo":"","bannerInfo":{"t_id":"Page45a22b6b-70f3-4698-9255-e4681af2b5b9","language":{"fr_ca":"","en_ca":"%3Cp%3EFree%20shipping%20sitewide%2C%20no%20minimum.%3C%2Fp%3E","en":"%3Cp%3EFree%20shipping%20sitewide%2C%20no%20minimum.%3C%2Fp%3E","fr":""},"id":"Page45a22b6b-70f3-4698-9255-e4681af2b5b9"},"gInfo":""}],"autoRun":true,"displayTerminal":"pc,tablet,mobile","isShowDivide":true}


What is a scroll box?

A scroll box is that part of a webpage, or any digital interface, that lets you move the content up and down or side to side. This way, you can view all the content that doesn't fit into the initial viewable area. Think of it as a little window on your screen through which you can see different parts of content by moving it around with a scrollbar or your mouse wheel.

Can I add a scroll box to my website using HTML and CSS?

Yes, you can create a scroll box on your website with some basic hypertext markup language (HTML) and cascading style sheets (CSS). In HTML, you would use a container element, like a div, with a defined height and width. Then in your CSS, you set the overflow property to 'auto' or 'scroll' to enable scrolling for that element. If the content inside the container is larger than its dimensions, the browser will automatically show scrollbars for navigation.

How do I make a scroll box without always showing the scrollbar?

To create a more streamlined look, you can use the cascading style sheets (CSS) property 'overflow:auto;'. This tells the browser to only show the scrollbar when the content inside the scroll box exceeds the dimensions of the container. So, when all the content fits without needing to scroll, the scrollbar stays hidden, creating a cleaner look for your design.

What could cause my scroll box not to work properly?

Several factors can affect the functionality of a scroll box. The most common is incorrect cascading style sheets (CSS) properties. If you've set 'overflow: hidden;' instead of 'scroll' or 'auto', the scrollbars won't appear. Also, ensure that the container's height and width are set and that the content is larger than the container to necessitate scrolling. Lastly, conflicting CSS from multiple stylesheets or inline styles can sometimes override your intended design.

Does JavaScript enhance scroll boxes?

JavaScript can greatly enhance the functionality of scroll boxes. With JavaScript, you can create dynamic effects like infinite scrolling, where new content loads as you reach the bottom of the scroll box. You can also control the behavior of the scroll box, customize the scrollbar's appearance, or implement smooth scrolling effects. JavaScript opens a world of possibilities for user interaction with scroll boxes.

What happens if I don’t set a height for a scroll box?

If you don’t set a height for your scroll box, it won’t behave as expected. It will likely expand to accommodate all the content inside it, essentially negating the need for a scroll. To ensure it functions correctly, you must define explicit dimensions for the container that holds your scrollable content. That way, anything beyond those dimensions will activate the scroll function.

Can I create horizontal scrolling inside a scroll box?

You sure can! If you want your content to scroll left and right instead of up and down, you can control this with the 'overflow-x' property in cascading style sheets (CSS). Set it to 'scroll' or 'auto' on your container, and make sure the content inside is wider than the container itself. Then, a horizontal scrollbar will appear to navigate through the content.

Could touchscreens affect how scroll boxes work?

Touchscreens do change the interaction with scroll boxes. Instead of using a visible scrollbar, users on touch devices typically swipe or drag the content directly to scroll. This is more intuitive on touch devices and reduces the need for a visible scrollbar. However, it's good practice to ensure that scrollbars are still accessible for users who may navigate using a mouse or trackpad.

What happens if the scroll box is sensitive to mouse wheel movements?

If your scroll box is too sensitive to mouse wheel movements, you may need to adjust the scroll behavior with JavaScript. You can use event listeners for the 'wheel' event to control how the scroll box responds to the mouse wheel, including the speed and distance of scrolling. By fine-tuning these settings, you can create a smoother and more controlled scrolling experience.

Can scroll boxes affect the accessibility of my website?

Scroll boxes can affect website accessibility if not implemented correctly. Users who rely on keyboards or screen readers may have difficulties if the scroll box isn't navigable with keyboard commands or if the scrolling content isn't announced properly by assistive technologies. To maintain accessibility, ensure that all users can access and navigate your scroll content easily, regardless of how they browse the web.

Can a scroll box be utilized for images or videos, not just text?

Yes, a scroll box can handle any type of content, including images, videos, and even interactive elements like forms or maps. This is especially useful for galleries or portfolios where you want users to scroll through items horizontally or vertically. Just ensure the inner content is styled correctly and that the scroll box dimensions are set to show the content in an intuitive and user-friendly manner.

How can I troubleshoot a malfunctioning scroll box across various browsers?

Cross-browser issues with scroll boxes often come down to inconsistencies in default browser styles or unsupported cascading style sheets (CSS) properties. Start by checking your code against the CSS specifications to ensure you're using properties that are widely supported. Then, use a CSS reset to standardize styles across browsers. From there, test your scroll box in different browsers and use developer tools to debug any issues that arise.

What’s the best practice for the speed of auto-scrolling boxes?

Auto-scrolling should be set at a speed that allows users to comfortably read or view the content. If it's too fast, it can be difficult to follow, and if it's too slow, it can be frustrating. Generally, a slow to moderate speed works best. Also, give users control to pause, stop, or navigate through the content at their own pace, which is also an accessibility consideration.

Can I make a scroll box accessible for users who navigate with keyboards?

Yes, to make a scroll box keyboard-accessible, focus on the tab order and ensure that all interactive elements inside the scroll box are reachable using the Tab key. The container should be navigable using arrow keys when it's focused. Adding 'tabindex="0"' to your scrollable div makes it focusable. Ensure that when the scroll box is in focus, keyboard users can scroll through the content using the arrow keys.

What is the difference between scrolling and pagination from user experience perspective?

Scrolling allows users to move through content continuously, which can be more natural and faster for browsing, particularly on mobile devices. Pagination, on the other hand, divides content into discrete pages. This can be better for structured navigation or when users need to reference specific items on a page. The choice between the two often depends on the content type and user needs.

{"pageComponentDataId":"c6016cday5451-43d6-9d34-e558a08d2b76","isAssociatedRelease":"true","pageComponentDataLangCode":"en","configData":{"jumpType":"currentTab","headlineColor":"black","displayNumber":"","styleMode":"vertical","headline":"","products":[{"number":{"t_id":"4XD1C99223","language":{"fr_ca":"","en_ca":"4XD1C99223","en_us":"","en":"4XD1C99223","fr":""},"id":"Paged364d785-5b43-46f3-897f-cfc1f2886cc5"}},{"number":{"t_id":"GX30Z21568","language":{"fr_ca":"","en_ca":"GX30Z21568","en_us":"","en":"GX30Z21568","fr":""},"id":"Page8a92c658-e187-4221-a70b-abfeb5c40052"}},{"number":{"t_id":"GX41L44752","language":{"fr_ca":"","en_ca":"GX41L44752","en_us":"","en":"GX41L44752","fr":""},"id":"Page3c3ca4cb-191e-42d6-b6bf-2a17188dcd34"}},{"number":{"t_id":"GY51F14319","language":{"fr_ca":"","en_ca":"GY51F14319","en_us":"","en":"GY51F14319","fr":""},"id":"Page9aad6b00-44a5-4f35-91db-6509e57b5f2f"}},{"number":{"t_id":"4Z91K18761","language":{"fr_ca":"","en_ca":"4Z91K18761","en_us":"","en":"4Z91K18761","fr":""},"id":"Page8d533231-87a4-40f2-9a1c-5e922f32affc"}}]},"urlPrefix":"AAAAAAAFAAAH","needGetLatestTransDataKey":"needGetLatestTransDataValue","title":"glossary-right-blue-boxes-fragment","pageId":"ed8ce94b-788f-4a56-a348-d72df37718b3","urlEdit":0,"uri":"/FragmentDirectory/gloccery/glossary-right-blue-boxes-fragment.frag","pageComponentId":"c6016cday5451-43d6-9d34-e558a08d2b76","tplId":"e60a662e-c1b6-4ba3-afa9-6f6977b562f8","pageComponentUuid":"c6016cday5451-43d6-9d34-e558a08d2b76","targetUser":"0"}
coming coming
Starting at
List Price
Est Value
Est Value:
List Price
Est Value (Estimated Value)
List Price is Lenovo’s estimate of product value based on the industry data, including the prices at which first and third-party retailers and etailers have offered or valued the same or comparable products. Third-party reseller data may not be based on actual sales.
Estimated value is Lenovo’s estimate of product value based on industry data, including the prices at which Lenovo and/or third-party retailers and e-tailers have offered or valued the same or comparable products. Third-party data may not be based on actual sales.
Learn More
See More
See Less
View {0} Model
View {0} Models
Delivery options for {0}
Part Number
Features
See More
See Less
Compare
Added!
Great choice!
You may compare up to 4 products per product category (laptops, desktops, etc). Please de-select one to add another.
View Your Comparisons
Add To Cart
Add To Cart
We're sorry,
Products are temporarily unavailable.
Continue Shopping
Learn More
Coming Soon
Featured Product
Featured Products
Oops! No results found. Visit the categories above to find your product.
Save

Seasonal Sales & FAQ's

open in new tab
© 2024 Lenovo. All rights reserved.
© {year} Lenovo. All rights reserved.
Compare  ()
x