I've had a problem with scrolling div with using flex-direction: column-reverse;
Here is my 'visible' part of code:
.messagesBox {
overflow-y: scroll;
padding: 10px;
row-gap: 2px !important;
overflow: auto;
display: flex;
flex-direction: column-reverse;
width: "100%";
}
<div
id="messagesBox"
onScroll={onScroll}
className={styles.messagesBox}
>
{renderContent()}
</div>
I create this div to display an array of object, set vertically with scrool sticky to bottom thanks to column-reverse (i need to use this because i have no contact with server side).
Here is my onScroll function:
const onScroll = () => {
const box = document.getElementById("messagesBox");
console.log(box.scrollTop);//-267 on top div, 0 on bottom div, I need reverse this values
}
when I scroll my div to top the scrollTop function return me bad values, when I'm on top she return me some negative values like -267.7, but when i scroll to bottom then return me 0.
Can someone tell me how to get correct values and get 0 from scrollTop when scrool is on top?
Thanks for any help!
////////////////////////////
Related
In my code i have a scrollable div with overflow-y: scroll. The start punt for scrolling is at the top of my div, but i want to start in the center of the div with scrolling. Has anyone a solution for this?
export function Portfolio({ children }) {
const portfolioRef = React.useRef(null)
return (
<div ref={portfolioRef} className={styles.component}>
{ children }
</div>
)
}
.component {
overflow-y: scroll;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
height: 30rem;
margin: auto;
& > * {
margin-top: var(--size-xxs);
margin-bottom: var(--size-xss);
}
}
as you are having reference to the element , you can use scrollTop and scrollLeft functions and assign the value of height , at which position , you want scrollbar to appear
//it would be somewhat like this
useEffect(()=>{
this.ref.portfolioRef.scrollLeft = 200 //x scroll position
this.ref.portfolioRef.scrollTop = 200 //y scroll position
},[])
I have a div container that is about 70% of the height of the page. The 30% which is outside the div is dim lighted (greyed out).
I am trying to implement a functionality where scrolling down within this container div causes the container div to fill up more of the page (less vertical space is greyed out) and eventually all of it (so 100% height).
Vica versa, when scrolling upward within the container and reaching the top should cause of the greyed out space to become bigger. What is the easiest way to implement this, possibly with the help of a library?
Using the scroll event and a combination of scrollTop, scrollHeight and clientHeight properties, we could get something that resembles your need:
let elem = document.querySelector('div');
elem.addEventListener('scroll', () => {
if(elem.scrollTop == 0) {
elem.style.height = `${elem.clientHeight + 10}px`;
}
if(elem.scrollHeight - elem.clientHeight == elem.scrollTop) {
elem.style.height = `${elem.clientHeight + 1}px`;
}
});
body {
background: #555;
height: 100vh;
margin: 0;
display: flex;
align-items: center;
overflow-y: hidden;
}
div {
background: #ccc;
height: 70%;
width: 100%;
overflow-y: scroll;
}
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
I have a simple 3 column layout with a left sidebar, content area, and right sidebar. I am using flexbox to handle widths. I would like to make it so that when a user drags the right border of the left sidebar, the div can be resized. I would prefer a css solution if it makes sense but am open to javascript or jquery. Whichever approach is easiest for me to understand : )
Here is a possible solution using the css resize property (click Run code snippet to see the result).
Notes:
The resize handler is in the bottom right corner of the left sidebar
The resize property is not yet fully supported by all browser (~74% see caniuse)
The styles for the resize handler are still limited (see this question)
.container {
height: 500px;
display: flex;
}
.left-sidebar {
display: flex;
flex-direction: row;
background-color: #364F6B;
color: #fff;
/* This is for resizing */
overflow: scroll;
resize: horizontal;
}
.center-aria {
background-color: #3FC1C9;
flex-grow: 2;
}
.right-sidebar {
background-color: #FC5185;
}
.left-sidebar, .right-sidebar, .center-aria {
padding: 8px;
}
<div class="container">
<div class="left-sidebar">
Left Sidebar - Resize me
</div>
<div class="center-aria">Center Aria</div>
<div class="right-sidebar">Right Sidebar</div>
</div>
I'm trying to animate a slide in menu using CSS/JavaScript (SASS/CoffeSript). It works like this, the only problem is that the width of the menu which slides in is hardcoded (233px). How can I dynamically get the width of the div and set it back, when I need to set the width of the div to 0 in CSS on start? Can I somehow calculate what the div width should be and set this again?
Any ideas how I might solve this to get the width dynamically, so that I can add/remove items to the menu without changing a hardcoded value in the CoffeScript?
HTML/PUG:
// Module: Header
.header
.header--logo
a(href="/", class="link-logo")
img(src="/img/logo.svg")
.header--menu#menu
a(href="#", class="link-menu")
img(src="/img/menu.svg", id="clicked-menu-item")
ul#nav
li: a(href="") projects
li: a(href="") contact
li: a(href="") self
CSS/SASS:
.header
position: sticky
top: 0
left: 0
background-color: $lightColor
display: flex
justify-content: space-between
padding: $baselineHeight
&--menu
display: flex
align-items: center
ul
width: 0px
overflow-x: hidden
transition: width ease-in-out 300ms
li
display: inline
margin-left: $baselineHeight
JavaScript/CoffeScript:
element = document.getElementById('clicked-menu-item')
element.onclick = (obj) ->
if (obj.srcElement.classList.contains('clicked'))
document.getElementById("nav").style.width = "0px"
else
document.getElementById("nav").style.width = "233px"
obj.srcElement.classList.toggle('clicked')
false
I've being trying to get a consistent horizontal scroll with flex-box.
http://codepen.io/sheriffderek/pen/NABzdQ
Things were going great, but I did that thing ~ where you forget to look at it in Safari and FireFox. Things aren't working great there. Normally, if something works in web-kit but not firefox, webkit is smoothing out something that isn't right / where as firefox follows the rules. So, it's not a bug or anything... but the flexy things aren't really expanding around their child images.
That being said, I can't figure out which part is the pivotal thing that needs to change.
I'm using flex-box for the header and 'content' area where the content area grows to fill the remaining space. So, a global column
Within the 'content' area, there is a list that is flex and row. In the list there are items with either text or an image. The images should be 100% height of the list, and then auto width.
I would have thought that I could set the images to 100% height and width auto (similar to how I do the opposite for small-screens) - but the affect is not the same.
img {
display: block;
height: 100%;
width: auto;
}
to deal with this, I use JS to find the height of the 'content' area and set the images to that height.
http://s.codepen.io/sheriffderek/debug/NABzdQ (version with no editor for testing / on iPad etc.)
Works great in Chrome.
So... Does anyone have any advice? My real project is small-screen first, so more complex - but this is a clear example of where things go awry.
Styles
ul
list-style: none
margin: 0
padding: 0
body
display: flex
flex-direction: column
height: 100vh // ?
.header
//
.section // content
display: flex
flex-grow: 1
.item-list
display: flex
flex-direction: row
flex-grow: 1
max-width: 100%
overflow: auto
.item
display: flex
flex-grow: 1
a //
display: block
display: flex
.image-w
width: auto // should stretch to fit the child / image
max-height: 100%
overflow: hidden //?
img
display: block
width: auto
// height to be set by JS
.text-w
width: 400px
padding: 1rem
Scripts
var setUp = function() {
$('.item').each( function() {
var $this = $(this);
// var $thisFigure = $this.find('.image-w');
var $thisImage = $this.find('img');
var thisHeight = $this.outerHeight();
$thisImage.css({
height: thisHeight
});
});
};
$(window).resize( setUp ).trigger('resize');