I have some anchor links on my website, and when clicking on them - smooth scroll (Bootstrap feature) turns on and it scrolls smoothly.
Due to the specificity of my website I need to disable smooth scrolling in my html or css code.
Thanks in advance!
Found some solutions with some js code, but it's not what I need.
You can disable smooth scrolling by using the scroll-behavior property in CSS (there is scroll-behavior: smooth in Bootstrap 5).
html {
scroll-behavior: auto !important;
}
Related
I'd like to scroll to the bottom of the page and I recently found the scroll behavior style tag. Is there a way to change the speed of smooth scrolling using a CSS style?
Related question (using JQuery):
How to change speed of a smooth scroll?
No, the smooth scrolling speed cannot be changed using CSS. The only attribute tags available are behavior tags; smooth/auto.
I am having a problem when I open a Bootstrap modal, it sort of moves the entire website a bit. I checked this question out, but adding .modal-open { overflow: scroll } did not help me, as yes, it made it keep the right side scroll bar, but the problem was not that it disapeared, just that it moved the whole website a little to the right - this also resulted in a bottom scrollbar, affecting the footer.
I am basically just looking for a conclusion where triggering a Bootstrap modal does not move my entire website, this gif demonstrates it;
I have not added other custom css affecting the .modal-open other than overflow: scroll. Although I have tried setting it to overflow: auto and hidden ect., nothing really helped.
It looks like problem with overlay - can you check out it's styles?
I'm building a website that has custom scrolling, and as such, I would like to hide default scroll bars. I'm using the following CSS to accomplish this:
html, body {
overflow: hidden;
}
This seems to work, but the problem I'm having is that scrollbars flash and then disappear whenever the page loads. This appears to happen in all browsers on Windows. Any idea as to why this might be?
Angular is also being used in the project.
I found the answer to the problem:
I had a transition wrapper that Angular was injecting. This transition wrapper had a default overflow value, and thus would show scrollbars. Scrollbars flashed because the transition only played for .5s, and then would leave the DOM. Adding the following line to my code made it work:
[ui-view].wrapper {
&.ng-enter,
&.ng-leave {
overflow: hidden;
}
}
I am trying to create a Javascript Modern UI app. The problem is, vertical scrolling doesn't work. As I try to scroll using the mouse scroll, the page (HTML file) just stays there and does nothing, and it only displays the contents that are at the top of the page (the contents that fit on the screen at the beginning)
How can I enable vertical scrolling?
I realize this is several years old, but for me this was fixed by overriding the overflow property on the html element
html {
overflow: auto;
}
I found the solution. It's because of the height:auto property. Remove it and voila ~
When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.