I have a simple scroll snapping code below which works perfectly in Firefox 80.0.1 where as in Google Chrome v85.0.4183.102 he scrolling behavior isn't smooth and there is a delay in the snapping effect. Here is a link to a screen recording in Firefox and Google Chrome. From what I know scroll snapping should be supported in the major browsers as from caniuse.
Here are my code snippets
<body>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cumque ut veritatis accusantium exercitationem, accusamus dolores eveniet. Adipisci hic soluta reiciendis nihil accusantium quam facilis. Animi earum culpa voluptate magni.</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cumque ut veritatis accusantium exercitationem, accusamus dolores eveniet. Adipisci hic soluta reiciendis nihil accusantium quam facilis. Animi earum culpa voluptate magni.</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni cumque ut veritatis accusantium exercitationem, accusamus dolores eveniet. Adipisci hic soluta reiciendis nihil accusantium quam facilis. Animi earum culpa voluptate magni.</section>
</body>
html{
margin: 0;
padding: 0;
overflow-x: hidden;
scroll-snap-type: y mandatory;
overflow-y: scroll;
scroll-behavior: smooth;
}
body{
scroll-behavior: smooth;
}
section{
width: 100vw;
height: 100vh;
scroll-snap-align: start;
}
Here is a workable demo.
https://jsfiddle.net/cb5nraxq/
Is this a known bug on Google Chrome or did I set something wrong? I'm on Windows BTW
EDIT
The issue only occurs when scrolling use mousewheel
Related
I am working in a Nuxt app and using CSS based smooth scrolling to anchor links. The smooth scroll itself works but the scroll-margin property is achieving nothing... it is seemingly completely ignored. The exact same code works fine outside of the Nuxt app so I wonder whether it is something to do with Nuxt.
Slimmed down version of the code is as follows and I have also created a (working) non-Nuxt codepen to show the code in action outside of Nuxt.
For the sake of clarity, I want to use CSS only to achieve smooth scrolling with a scroll margin in Nuxt. I do not want to use JavaScript or built in Vue / Nuxt features. If I have to I will but, at the very least, I'd like to know why scroll-margin is not doing anything.
HTML
<main>
<header>Fixed header</header>
<section>Click this link to scroll to a section further down the page and show the targeted state. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
<section id="scroll-section"> <strong class="show-on-target">Check out the space between this block and the header 👆 The block is clear of the header thanks to the <code>scroll-margin</code> property. The block was blue before you clicked the link and this text wasn't here either.</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum architecto explicabo accusamus! Ab fuga fugiat hic recusandae, quo, dignissimos tempore velit aliquam facere, accusamus explicabo pariatur at enim modi doloremque.</section>
<section>Lorem ipsum dolor sit amet adipisicing elit. Quidem iste fuga quae fugit molestiae accusamus dolorum ea doloremque veritatis totam! Eum exercitationem nostrum nam doloribus, blanditiis quidem inventore perspiciatis ullam?</section>
</main>
SCSS
* {
box-sizing: border-box;
font-family: helvetica;
margin-inline: 0;
line-height:1.5;
}
html {
scroll-behavior: smooth;
}
header {
position: fixed;
display: grid;
place-content: center;
inset-block-start: 0;
inset-inline-start: 0;
width: 100%;
height: 3rem;
background: #ed6a5a;
font-size: 1.5rem;
}
section {
background: #9bc1bc;
padding: 50px 30px;
&:nth-child(2n) {
background: #f4f1bb;
}
&:first-of-type {
padding-block-start: 20vh;
}
}
strong {
font-size: 1.2em;
}
code {
font-family: monospace;
}
:target {
scroll-margin: 5rem;
background: #F2D7EE;
.show-on-target {
display: block;
margin-block-end: 20px;
}
}
.show-on-target {
display: none;
}
What I tried:
Using the code above to create a CSS-only smooth-scroll including a scroll-margin. I also tried tweaking the code above to use section, [id], section[id] and #myAnchor in place of :target but to no avail.
What I was expecting:
Page to scroll smoothly to the anchor leaving a 5 rem margin above it.
What actually happens:
Page scrolls smoothly to the anchor but with no margin above it
I'm trying to find a way to make an element resizable so that it will simultaneously reveal more of the element's content as the height increases while covering the content of the other element that it is taking space from.
An example of this is of Gmail's left sidebar, these two images show before and after the resize drag: Sidebar Before - Sidebar After
I was thinking it could be done with the CSS resize property, but while the lower element can be resized downwards, it won't resize upwards taking space from the above element, and the resize grabber also seems to be difficult to change its position from the bottom right to the top.
Thank you in advance.
You can use the resize property together with a flex setting that causes the other element to occupy the rest of the space.
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 80vh;
margin:1em;
}
.container>div {
padding: 1em;
border: 2px solid rgba(0, 0, 0, 0.5);
overflow: auto;
}
.top {
resize: vertical;
height: 50%;
}
.bottom {
flex: 1;
}
<div class="container">
<div class="top">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga repellat laborum maxime ipsam sed quisquam, numquam eligendi doloribus non nisi unde vero deleniti velit dolore nesciunt error, sapiente provident at sint sunt! Cumque nostrum, placeat nisi,
minima, maiores molestiae quas praesentium mollitia hic natus suscipit nemo accusantium, beatae itaque rem aut omnis? Quisquam, natus dicta eveniet! Voluptates repellat, assumenda fugit. At, culpa quos nulla. Dolorem et modi quisquam velit quaerat
aspernatur iste natus eum magnam vero, id eius expedita quo placeat maiores enim quas iusto amet dolor ullam aperiam sequi laboriosam. Omnis voluptas, a exercitationem cum quidem quaerat ullam deleniti.
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet a magni culpa quidem in et facilis, ducimus voluptate explicabo saepe repellat, eius sequi molestias voluptatum! Maiores animi quasi quia nisi, pariatur id aperiam! Veritatis error molestias
minima modi suscipit ipsam eius sed perspiciatis est nobis illo, incidunt itaque harum, distinctio?
</div>
</div>
No matter what I try, I can't get an image on my test web page get sticky on scroll. It's here: https://www.varamedia.be/website-laten-maken/restaurants/. I want the image of the laptop with the people in it to be sticky on scroll through the other content.
It's a Wordpress site and I also noticed something peculiar, namely the CSS that is not recognizing the sticky css, apparently. The error message is: "expected (static | relative | absolute | fixed) but found 'sticky'." Here is an image of it: https://www.varamedia.be/wp-content/uploads/2019/01/sticky.png
I really appreciate any kind of feedback on this. Thanks a lot for sharing your thoughts.
I read all articles I could get my hands on, tried all proposed solutions from the docs I could find online, but it does not work well for me. The image refuses to become sticky.
I tried using ID's, classes, played around with the overflow:hidden; etc But somehow I am missing something here. Though it feels as if I'm overlooking some detail because the position:sticky; CSS feature looks kind of straightforward but apparently isn't :/
.stickyimage{
position:sticky;
}
I'd welcome any advice based on an inspection of the given URL. Thanks a thousand times for your valuable input.
a 'top' or 'bottom' value must be added.
body {
margin:0;
}
p {
font-size:36px;
line-height:50px;
}
.nav {
width:100%;
background:orangered;
height:60px;
font-size:24px;
color:#fff;
text-align:center;
line-height:60px;
/*following codes is for sticky */
position:sticky;
top:0; /* it's up to you */
}
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates voluptatum cum optio a natus iste repellendus eaque at aut, voluptatibus sit veritatis quis quam magnam aspernatur, vero, sunt modi magni.</p>
<div class="nav">This a sticky nav</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni, delectus! Beatae similique atque voluptas ipsam impedit blanditiis qui reprehenderit, nisi quas odio dolor? Quam rem magnam, deleniti quia itaque iusto.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis modi, debitis minima eveniet et illo laudantium, distinctio mollitia quaerat blanditiis quas. Quo doloribus illum neque. Unde labore ut perspiciatis nobis!</p>
You have 2 issues.
Issue #1 - You must delcare either top, bottom, left or right on the element with position: sticky.
Issue #2 - Your parent element can not have overflow: hidden. Right now both the body tag and the html tag have the following...
overflow-x: hidden;
overflow-y: hidden;
Remove these...
You also need to make sure that the stickyclass is on the correct div, you want it on the outer div, in your example it should be on the following div.
I tested this and it works as expected.
I have some custom scrollbar styles coming from external css file which I don't have any control of.
::-webkit-scrollbar {
width: 5px;
}
I would like keep this custom scrollbar styles but override it within a container element. I've tried to target it different ways with no luck.
#test::-webkit-scrollbar {
width: 10px !important;
}
http://jsfiddle.net/Lk5ct8ta/
You're seeing the scrollbar on the body. Your div#test is 2000px tall causing the body to overflow, so the body gets the scrollbar, but your custom styles are assigned to div#test which does not have overflowed content.
For example, here div#test is reduced in height and overflow set to scroll, with more content forcing it's content to overflow and the scrollbar styles to apply:
div{
height:200px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background-color:#808080;
}
#test::-webkit-scrollbar {
width: 10px !important;
}
#test::-webkit-scrollbar-thumb {
background-color:red;
}
<div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.</div>
How can I make white inner shadow in the div?
I've trying with other colors — works fine, but with white color that don't work.
JSBin example
Thanks!
Update:
I need something like this:
Alternatively, you can create a simple overlay on the layer above the content and make it your box-shadow
.container {
height: 300px;
width: 300px;
background: #fff;
border: 1px solid #cecece;
border-radius: 4px;
position: relative;
}
.container .content {
overflow: auto;
height: 100%;
}
.container:after {
width: calc(100% - 20px);
height: 110px;
background: linear-gradient(180deg, #fff, transparent);
position: absolute;
top: 0;
left: 0;
content: close-quote;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro nesciunt quo fuga quasi vero modi aspernatur
nemo harum sapiente nobis ex aliquam excepturi possimus sit laboriosam libero adipisci non aliquid.Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Dicta libero modi debitis ipsa architecto nihil
exercitationem cumque natus ducimus at quae doloribus illum optio aut expedita eveniet magnam officiis
qui!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam officia reiciendis doloremque neque
debitis aperiam voluptates non libero atque ut iure rem consequuntur alias commodi velit asperiores sit
nesciunt minima. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos dolor ab animi ullam id
incidunt tempore atque doloremque quidem quaerat soluta eaque expedita aspernatur velit reprehenderit
doloribus similique. Quod non.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit delectus iste
aliquid vero ut? Odio quas asperiores odit velit vitae aspernatur beatae! Adipisci molestias placeat maiores
eos voluptatum assumenda sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci similique
quos fugit nostrum neque sit repudiandae error laborum possimus voluptatum molestiae impedit quo repellendus
minus corrupti doloribus itaque ipsa consequatur!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consequuntur molestias odit numquam soluta veniam saepe incidunt dolore praesentium nobis labore amet cumque
aliquam et consectetur est at quis voluptas doloremque?
</div>
</div>
</body>
</html>
box-shadow: grey 0px 30px 40px -2em inset;
Use grey into white.
If I understood well, you want a white shadow inside a white input? You need a different color to make the shadow.
I have maybe misunderstood, don't know. Tell me if this helped or if I just didn't understand.