kandi X-RAY | Odds-and-Ends Summary
kandi X-RAY | Odds-and-Ends Summary
Odds-and-Ends
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of Odds-and-Ends
Odds-and-Ends Key Features
Odds-and-Ends Examples and Code Snippets
Community Discussions
Trending Discussions on Odds-and-Ends
QUESTION
Let me begin with a jsFiddle: https://jsfiddle.net/johnlove/f14rjc9o/35/
For an interior DIV with a border, I want to scroll the DIV's contents, but keep border fixed?
The background centers on the ability to scroll an inner DIV using only the window scrollbar and not use overflow-y
.
When I scroll using window scrollbar, the inner DIV #scrollableContent does scroll ... but the text inside the css border leaks out!
Here is a picture or 2 ... the 1st before using scrollbar ... the 2nd after using scrollbar ... as you can hopefully see, the text inside the red border goes outside the red border:
1) HTML
...ANSWER
Answered 2019-Oct-17 at 09:28One way you can achieve this effect is by defining the width
, height
and padding
of the and then using
::before
and ::after
pseudo-elements:
- one pseudo-element to
clip-path
out the rest of the visible viewport - one pseudo-element to
clip-path
a fixed border for the text-window
In the example below, the ::before
pseudo-element clip-path
paints the whole of the rest of the body background black and the ::after
pseudo-element clip-path
gives the text-window a 6px
red border.
Everything (except the width of the border) is defined using CSS Custom Properties at the top, so you can alter any of:
--textWidth
--textHeight
--textPadding
and everything else will reconfigure proportionately.
Working Example:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install Odds-and-Ends
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page