- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我遇到了一个有趣的问题。我正在使用 jquery 为 html 和 body 标签的 scrolltop 属性设置动画以执行平滑滚动。它工作得很好,但在 MS Edge 中出现水平滚动条(Mac,没问题,没有东西溢出到侧面:/)。所以为了防止这种行为,我设置了 overflow-x: hidden 到 body 和 html 标签。水平滚动条消失了。但是,我的平滑滚动条无法正常工作。当您不在页面顶部时单击按钮向下滚动时, View 会跳到顶部,而且它不会滚动到请求的位置。
这是您可以看到的网站。单击 PRO MUŽE 或 PRO ŽENY(在顶部的中心)。 http://mountiny.com/lab/colourMe/您知道为什么水平滚动条在某些 Windows 浏览器中显示而在浏览器中不显示吗?
感谢您对动画行为的解释以及对滚动条的帮助。
那是我的 Javascript (jQuery)
<script type="text/javascript">
var colors = ["red", "purple", "pink"];
var number = Math.floor(Math.random() * 3);
var logo = $(".logo img");
var parfem = $(".parfem img");
var descBg = $(".desc");
var introSection = $(".intro");
var text = $(".introText");
var contentText = $(".content-text");
var lomitko = $("#svgLomitko");
if (number == 0) {
logo.attr("src", "images/colourme_logo_cervena.png");
parfem.attr("src", "images/colourme_cervena.png");
introSection.css("backgroundColor", "#D2232A");
contentText.css("backgroundColor", "#D2232A");
descBg.css("backgroundColor", "rgba(210, 35, 42, 0.7)");
text.css("color", "#981A26");
lomitko.css("stroke", "#981A26");
// alert("red");
}else if(number == 1) {
logo.attr("src", "images/colourme_logo_fialova.png");
parfem.attr("src", "images/colourme_fialova.png");
introSection.css("backgroundColor", "#8568A2");
contentText.css("backgroundColor", "#8568A2");
descBg.css("backgroundColor", "rgba(159, 133, 181, 0.7)");
text.css("color", "#3F325D");
lomitko.css("stroke", "#3F325D");
// alert("purple");
} else {
logo.attr("src", "images/colourme_logo_ruzova.png");
parfem.attr("src", "images/colourme_ruzova.png");
introSection.css("backgroundColor", "#F37FB2");
contentText.css("backgroundColor", "#F37FB2");
descBg.css("backgroundColor", "rgba(244, 152, 193, 0.7)");
text.css("color", "#C5568F");
lomitko.css("stroke", "#C5568F");
// alert("pink");
}
$("#scrollTop").on("click", function(e){
e.preventDefault();
smoothScroll($("html"));
})
function smoothScroll(target) {
$('body,html').animate(
{'scrollTop':target.offset().top},
600
);
}
$(document).ready(function(){
// if ($(".mobile-info").css("display") != "none") {
$(".vyber").on("click", function(){
smoothScroll($(".offer"));
})
// }
$("#open-info").click(function(e){
e.preventDefault();
$(".cross").css("display", "block");
// $(".content-text").css("display", "block");
$(".content-text").toggleClass("display-block");
$(".content-text").animate(function(){
opacity: 1
}, 300, function(){
$(".content-text").css("opacity", "1");
})
});
$(".cross").click(function(){
$(".content-text").animate(function(){
opacity: 0
}, 300, function(){
$(".content-text").css("opacity", "0");
});
setTimeout(function(){
$(".content-text").toggleClass("display-block");
$(".content-text").css("opacity", "1");
$(".cross").css("display", "none");
}, 300);
});
$(".par").click(function(){
// alert("asd");
if ($(".desc").hasClass("selected")) {
if ($(this).find(".desc").hasClass("selected")) {
$(this).find(".desc").removeClass("selected");
return;
};
$(".selected").removeClass("selected");
};
$(this).find(".desc").addClass("selected");
})
$("div.vyber a").click(function(e){
e.preventDefault();
if ($("div.vyber a").hasClass("selected")) {
// alert("asd");
if ($(this).hasClass("selected")) {
$("div.vyber a.selected").removeClass("selected");
// return;
} else {
$("div.vyber a.selected").removeClass("selected");
$(this).addClass("selected");
}
} else {
// alert("asd");
$(this).addClass("selected");
}
if ($(".zeny a").hasClass("selected")) {
$(".proZeny").removeClass("active");
$(".proMuze").addClass("active");
} else if($(".muzi a").hasClass("selected")) {
$(".proMuze").removeClass("active");
$(".proZeny").addClass("active");
} else {
$(".proMuze").removeClass("active");
$(".proZeny").removeClass("active");
};
})
// $(".offer:not(.desc)").click(function(){
// alert("as");
// if ($(".desc").hasClass("selected")) {
// $(".selected").removeClass("selected");
// };
// })
})
</script>
最佳答案
您的代码运行良好。
问题,一定出在你的 CSS 文件中。
I suspect that you set html and body height to 100% if yes, remove it or use min-height instead.
如果您将 html 和 body 高度设置为 100%,浏览器将 100% 视为可见空间,因此您无法滚动到任何地方,因为您可以看到的空间已经是 100%,因为您在 css 中强制这样做.您的文档包含在正文中,如果您将正文高度设置为 100%,如果您的文档高度大于可见空间,您希望看到什么?
关于jquery - 如果 html、正文溢出-x : hidden,则 ScrollTop 动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35526252/
我想知道是否有任何方法可以调用和使用 overflow:hidden 隐藏得很好的东西。 为了阐明我的意思,在 this example我想知道“This is hidden”是div的隐藏部分。 这
如果我们有以下HTML StackOverflow 使用以下 CSS * { margin: 0; padding: 0; } #i { overflow:
我正在使用 jQuery 制作幻灯片,我有几张图片应该一次滑入一张图片。我正在使用宽度与图像宽度相同的 div:80 像素。我使用了 white-space:no-wrap 和 overflow:hi
如果我有一个样式为 overflow: hidden; 的 div,我发现有时键盘操作会导致 div 滚动。而且由于没有滚动条,所以真的没有办法让 div 回到原来的状态。除了指定样式以防止出现这种情
我有一个 UIImageView,在表格单元格中有一个自定义类,它也使用一个自定义类。 UIImageView 作为单元格自定义类的属性连接。 UIImageView 有一个调用方法的 UITapGe
我正在创建一个网站,在一个 div 中我有一个视频,但我不想在移动设备上显示这个视频,所以我使用 hidden-xs 和 hidden-sm,到目前为止一切顺利。 但是,我的问题是,当我使用这些类时,
我对 C++ 可见性属性有疑问。我已阅读 http://gcc.gnu.org/wiki/Visibility但我不太明白它是如何工作的。 我想在我拥有的一些共享库中隐藏可见性。我相信这意味着符号被隐
我通过CSS的草图创建了一个菱形,它位于一个圆圈的左上角。 我为圆圈设置了overflow: hidden。钻石怎么还能触发cursor: pointer? 这是 project 的代码笔. html
这个问题在这里已经有了答案: Shape with a slanted side (responsive) (3 个答案) 关闭 3 年前。
在使用 Angular Material 时,我一直在看到 aria 属性。有人可以向我解释一下 aria 前缀是什么意思吗?但最重要的是我想了解的是 aria-hidden 和 hidden 属性之
我正在阅读有关 aria 使用的一些内容,并遇到了以下文档: Fourth Rule of ARIA Use 。我不清楚的一个部分是: "Applying aria-hidden to a paren
以下是我的简单导航代码。单击右上角的图标时会出现两个 div。我还在顶部使用 :before 实现了这些分区的三 Angular 形提示。对于第一个 div,我设置了 overflow:scroll
input[type=hidden] 和 visibility : hidden; 有什么区别? 最佳答案 第一个是输入元素,第二个是CSS2中的样式。 visibility: hidden; vis
我遇到了一个奇怪的问题,似乎与浏览器相关(IE9 及更低版本与 IE11),但想知道为什么会出现奇怪的行为。 问题描述:我使用 Spring 框架并使用其相关标签库来检索 JSP 上的数据。有一个称为
我在 viewDidLoad 中的两个 UIView 上将 hidden 属性设置为 YES。单击按钮时,它们将设置为 NO,因此将显示它们。如何在每次单击按钮时使这些属性在是/否之间切换? 最佳答案
我正在尝试使用树状列表实现侧边栏。我希望树中的每个元素只填充一行——没有溢出,没有换行/换行。 overflow: hidden; 可能是一个很好的解决方案,但还有另一个要求 - 每行都有一个绝对 d
我想用 overflow: hidden 隐藏一个超出容器的标题: HTML: Heading CSS: div { overflow: hidden; } h1 { transfor
我对 overflow:hidden 和 body 标签有疑问。这是一个小例子 主体版本(不工作) http://jsfiddle.net/5hGSp/13/ DIV 版本(有效)
html 的“隐藏”属性是一个 bool 值,不需要设置值。仅仅存在就足够了。 “aria-hidden”属性怎么样?光有存在感就够了吗?或者它是否需要设置值“true”? 最佳答案 aria-hid
在我的页面上,我有一个导航菜单和两个内容容器。 内容容器使用overflow:hidden 以便一次只有一个子div 显示。 我希望导航链接充当相关内容的激活器,以便在容器中滚动查看。 因此,例如,如
我是一名优秀的程序员,十分优秀!