I have used overflow-y: hidden; in my css to disable vertical scroll-bars. But still I need to allow users to scroll up and down through the mouse wheel.
How do I allow ONLY mouse wheel vertical scrolling but remove showing scroll-bars using overflow-y: hidden; ?
Any suggestions are appreciated. :)
I assume you're wanting to achieve this without JS?
If that's the case, one approach is to hide the scrollbar by offsetting it outside of a parent/wrapper element. So for example:
HTML:
<div class="wrapper">
<div class="child">
<p>Your content</p>
</div>
</div>
CSS:
.wrapper{
height:200px;
width: 100px;
overflow: hidden;
}
.child{
width: 100%;
box-sizing: content-box;
padding-right: 25px; //This amount will differ depending on browser. It represents the width of the scrollbar
overflow-y: scroll;
}
Try this:
In your css/scss file add to main-component that scrolable and without scrollbar.
In my case it's "page_customers":
page_customers {
::-webkit-scrollbar,
*::-webkit-scrollbar {
display: none;
}
/*... some css/scss ...*/
}
Related
I want to make my page scroll normally and stop and fix on a certain point, then scroll div, and after div is completely scrolled continue scrolling body as usual.
I've tried to disable scrolling of the page and work with the wheel event, adding margin top to my content, but it doesn't seem to be a good solution.
Example of what i want https://aimbulance.com/ilayaregeneration
Thanks!
Your example is not locking the scroll to the div, but masking the entire page and using position: sticky in order to achieve that.
SOLUTION
A possible solution is to make the div you want to be scrolled a container with position: relative that holds a masking element with position: absolute that covers the entire div and contains a mask that will be position: sticky with top: 0.
check out this example:
https://codesandbox.io/s/scrolled-div-jqw7z
Use overflow-y
<!DOCTYPE html>
<html>
<head>
<style>
html {
scroll-behavior: smooth;
}
#section1 {
height: 600px;
background-color: pink;
}
#section2 {
height: 600px;
background-color: yellow;
display: flex;
justify-content: center;
/* this is the usage */
overflow-y: auto;
}
#inner {
/* this height is larger than the parent */
height: 1200px;
width: 33%;
background: radial-gradient(circle, black, white);
overflow-y: auto;
}
#section3 {
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main" id="section1">
</div>
<div class="main" id="section2">
<div id="inner"></div>
</div>
<div class="main" id="section3">
</div>
</body>
</html>
so the problem is; I have 1 container that has 3 columns within it which start off with all even widths, but the borders on the middle column need to be able to be "dragged" / resized.
The ideal solution would be with CSS and HTML only.
The way I'm going about it currently is using resize: horizontal; & overflow-y: auto; Then set all initial widths.
HTML (simplified) - feel free to add more classes
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
CSS
.container {
display: flex;
height: auto;
width: 100vw;
background: #fff;
> div{
overflow-y: auto;
&:first-child {
width: 500px;
resize: horizontal;
}
&:nth-child(2) {
width: 33%;
resize: horizontal;
overflow: auto;
}
&:last-child {
width: 500px;
flex: 1;
}
}
}
Ideal solution: Whole column border is draggable, but we can't use a mouse down/mouse move event handler as it's a too intensive process. Also Javascript is currently off the table - although a solution with pure JS would be a fun learning experience.
Current solution: Bottom right corner is resizable in a horizontal direction only, but you can "overdrag" and send the columns into a weird width that you have to invisibly drag back again. Just not a very smooth experience.
Is there a solution out there that does it better than what I currently have?
I currently have a grid set up that looks something like this:
<div class="grid-container">
<div class="headers"> <!-- ... --></div>
<div class="row-container">
<div class="row"> <!-- ... --></div>
<!-- ... -->
</div>
</div>
Essentially what I'd like to do is place an overflow-x on the entire grid-container (so that scrolling horizontally will scroll both the headers and the rows together), but just place an overflow-y: overlay on the row-container (so that scrolling down will only scroll through the rows and keep the grid headers in a fixed position.
I was able to do that and it looks okay, however, the vertical scrollbar on the row-container is at the far right of the row-container. I'd like it to be visible and in a fixed position (similar to how it would look if you were to place an overflow-y on the entire grid-container except without affecting the headers).
Sorry I know I probably explained this poorly, but here's a JSFiddle that should hopefully illustrate the problem I'm having: https://jsfiddle.net/4xwd5yzp/
Notice in that fiddle, you can only see the vertical scrollbar when you scroll to the end of the row-container.
Thank you in advance for any help. Ideally, I'd prefer a solution using just HTML + CSS, but I'm also open to use vanilla JS + jQuery if absolutely necessary.
EDIT: Here is an example of how it currently works (not ideal):
And here is a photo of how I want it to look:
You were very close, if you take the overflow-y style off of .row-container and add it to .grid-container and also add position: sticky; and background: white; to .headers then I believe it'll work how you want it to.
Update the width in % rather than px.
`
.grid-container {
border: 1px solid black;
height: 200px;
width: 99%x;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.row-container {
height: 150px;
width: 99%x;
overflow-y: overlay;
}
.grid-cell {
display: inline-block;
width: 250px;
}
.headers {
border-bottom: 1px solid black;
height: 50px;
width: 99%;
}
.row {
border-bottom: 1px solid lightgray;
height: 30px;
width: 99%;
}
`
I have a problem with scrolling over fixed element, it doesn't work on my site. But I saw that there is no such problem in some scrolling examples like this one. After a while I found a little difference - on my site the scrolling of the page is not on the html tag but on the of app's root tag.
Here you can find an example of the situation that I have - you can't scroll over the red block http://jsbin.com/rutogosesa/edit?html,css,output, and here an example where you can scroll over the red block http://jsbin.com/munixamuqo/edit?html,css,output.
My quesion is: how to allow scrolling in first example. I know that I can subscribe on onwheel event and move scrollbar mannually, but it looks weird as all browsers have smooth scrolling my implementation will broke its behaviour, especially for mac users. Maybe there are some other possible solutions?
Let's boil your trouble down to this: if the mouse is over #inner, you can't use the usual methods (spacebar, arrow keys, trackpad, wheel) to scroll #outer up and down.
If you need to keep everything you have, get around this by adding pointer-events: none to the inner element. (Note that this means you won't be able to interact with it at all - so any links in the inner element won't be clickable. Given the examples you gave in your question, that won't be a problem.)
html,
body {
height: 100%;
margin: 0;
}
html {
overflow: hidden;
}
#inner {
position: fixed;
background: red;
width: 200px;
height: 200px;
pointer-events: none; /* this is your fix. note it doesn't work in IE < 9 */
}
#outer {
overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
background: blue;
height: 100%;
}
#push {
height: 2000px;
}
<div id="outer">
<p>top of #outer</p>
<div id="inner">
#inner
</div>
<div id="push" />
</div>
If you can get away with changing your html's styles, you can work around this by dropping the html {height: 100%; overflow: hidden}. This solution doesn't use pointer-events: none so you'll still be able to interact with the inner element!
html {
margin: 0; /* dropped html {height: 100%; overflow: hidden} */
}
body {
height: 100%;
margin: 0;
}
#inner {
position: fixed;
background: red;
width: 200px;
height: 200px;
}
#outer {
overflow-y: auto; /* I changed this from "scroll". that may have been an inappropriate change, but it seems like it's probably desirable - you don't want the scrollbar to show even if the window is tall enough that you can't scroll */
background: blue;
height: 100%;
}
#push {
height: 2000px;
}
<div id="outer">
<p>top of #outer</p>
<div id="inner">
#inner
</div>
<div id="push"></div>
</div>
I want to customize a swipe plugin with jQuery like the following:
My code structure is:
HTML
<div class="benefit-container">
<div class="benefit-title-container">
<div class="benefit-title">Why use Citrix Service Providers to Help Solve Your Business Problems?</div>
</div>
<div class="benefit-scroll-container">
<div id="benefit-support" class="benefit-sub-title">Support</div>
<div id="benefit-access" class="benefit-sub-title">Access</div>
<div id="benefit-service" class="benefit-sub-title">Service</div>
<div id="benefit-business-model" class="benefit-sub-title">Business Model</div>
<div id="benefit-choice" class="benefit-sub-title">Choice</div>
</div>
</div>
CSS
div.benefit-scroll-container{
position: relative;
margin-bottom: 36px;
overflow-x: visible;
white-space: nowrap;
text-align: center;
border-top: 1px solid #cfd1d3;
border-bottom: 1px solid #cfd1d3;
line-height: 44px;
padding-left: 10px;
padding-right: 10px;
}
My thinking is: when touch move the plugin, I will change the position of benefit-scroll-container.
When I set the "benefit-scroll-container" class with the following and swipe left. I found some part lost as the following picture shown.
div.benefit-scroll-container{
overflow-x: hidden;
}
If I set the "benefit-scroll-container" class with the following.
div.benefit-scroll-container{
overflow-x: visible;
}
Then I swipe left, found the whole page will be swiped left and some of plugin lose the border like the follow picture shown.
How can I solve this problem?
Give a certain width to div.benefit-scroll-container and then provide scroll property like this:
div.benefit-scroll-container {
width: 1000px; //or 100% as per your use
overflow-x: scroll;
}